Validar un email con Javascript consiste en analizar una cadena de texto, para comprobar que la cadena introducida por el usuario tiene la estructura específica de un correo electrónico, es decir, el formato se ajusta a lo que se espera en una dirección de email.

Esta validación se puede realizar de dos maneras. En este artículo queremos mostrar un par de mecanismos de validación de un email en Javascript uno más potente basado en expresiones regulares y otro más laborioso que está basado en comprobaciones de la cadena con los métodos de string que nos proporciona Javascript.

Validar un email con expresiones regulares

La forma más común de validar un email es utilizando una expresión regular. Es la manera más potente porque requiere menos código, aunque el código de las expresiones regulares es complejo de entender si no se tiene experiencia.

A continuación vemos un ejemplo de para validar un email con Javascript utilizando una expresión regular:

function validarEmail(email) {
    // Expresión regular para validar un correo electrónico
    const regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
    return regex.test(email);
}

Para usar esta función podríamos tener un código como este:

const email = "js@example.com";

if (validarEmail(email)) {
    console.log("El email es válido.");
} else {
    console.log("El email no es válido.");
}

Para poder entender un poco la expresión regular vamos a expresar con palabras cuáles son las comprobaciones que está realizando.

1. Que empiece con una combinación de caracteres alfabéticos, números, puntos, guiones bajos o guiones.
2. A continuación, que contenga un símbolo '@'.
3. A continuación, que tenga otra combinación de caracteres alfabéticos, números, puntos o guiones.
4. Para finalizar, debe aparecer con un punto seguido de caracteres alfabéticos entre 2 a 6 caracteres. (Esta terminación sería para el dominio de nivel superior como "com", "net", "es" etc.)

Esta expresión regular podría no cubrir todos los posibles casos válidos de correos electrónicos según las especificaciones del RFC 5322, pero es la que se suele usar.

Validar un email con las funciones de cadena de Javascript

Como práctica queremos ver otro estilo de validación basado en funciones de string, que a veces resulta más fácil de entender o de escribir. No es la mejor manera de proceder habiendo expresiones regulares pero didácticamente puede estar bien repasarla por dos motivos:

1. Darse cuenta lo útiles que son las expresiones regulares
2. Practicar con las funciones de string de Javascript y darle al coco para hacer un algoritmo capaz de validar cadenas complejas como lo puede ser un email.

La idea que vamos a seguir para validar el email consiste en dividirlo en partes y comprobar cada una de ellas. En este ejemplo podemos ver una función que se encarga de hacer ese trabajo.

function validarEmail(email) {
  // Verificamos si el email contiene el símbolo '@' 
  // y la @ no está al inicio ni al final
  const atIndex = email.indexOf('@');
  if (atIndex <= 0 || atIndex === email.length - 1) {
    return false;
  }

  // Dividimos el email usando la '@' como separador
  const [local, domain] = email.split('@');
  // Ese código genera dos constantes 
  // - local, con la parte de antes de la @
  // -- domain, con la parte de después de la arroba

  // Comprobamos si alguna de las partes está vacía
  if (!local || !domain) {
    return false;
  }

  // Verificamos que el dominio contenga un punto y no esté al inicio ni al final
  const dotIndex = domain.indexOf('.');
  if (dotIndex <= 0 || dotIndex === domain.length - 1) {
    return false;
  }

  // Comprobamos que el dominio no tenga más de un punto consecutivo
  if (domain.includes('..')) {
    return false;
  }

  // Comprobamos que el email no contenga caracteres inválidos 
  // Estos caracteres inválidos podrían extenderse si lo ves necesario
  const invalidChars = [' ', '!', '#', '$', '%', '&', '*', '(', ')', '+', ',', '/', ':', ';', '<', '=', '>', '?', '[', '\\', ']', '^', '`', '{', '|', '}', '~'];
  for (let char of invalidChars) {
    if (email.includes(char)) {
      return false;
    }
  }

  // Si estamos aquí es que todas las comprobaciones anteriores fueron correctas
  return true;
}

Este método es bastante más rudimentario y es muy probable que no hayamos comprobado todas las posibles situaciones que nos llevasen a deducir que un email no es válido. Por tanto, no es la mejor opción.

Recomendamos la expresión regular porque es más certera y el peso del script para validación será menor, con lo que estarás ahorrando unos bytes de peso de tu código.

Validaciones en el backend

Recuerda que si estás realizando validaciones en el frontend, con Javascript en el navegador, debes igualmente validar en el backend, pues el código del frontend podría ser trastocado con mayor facilidad por una persona maliciosa.

Por tanto, las validaciones en el navegador son interesantes, pero más como una mejora de la experiencia de usuario, ofreciendo un feedback instantáneo en la validación, antes de enviar el código al servidor y que el usuario tenga que esperar la respuesta.

Lo ideal es combinar la validación del lado del cliente para mejorar la experiencia de usuario con una validación adicional en el servidor para garantizar la integridad de los datos antes de darlos por buenos..