Skip to main content
5 de 8
se añadieron 11 caracteres en el cuerpo
A. Cedano
  • 95.2k
  • 31
  • 145
  • 257

Simplemente señalar que, de acuerdo a la especificación oficial, el regex que representa una dirección de email ortográficamente válida es el siguiente:

/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/

Puse a propósito el término dirección de email ortográficamente válida, porque lo que define una dirección de email realmente válida es que ésta funcione, es decir, que exista y pueda recibir emails.

De ahí se desprende que una verificación por medio de Javascript no es suficiente. Puede ayudarnos a hacer una validación [ortográfica], a condición de que Javascript esté activado del lado del cliente.

Si se quiere verificar que el email realmente existe, no hay otra manera que enviando un email y que el destinatario responda. Es a eso a lo que se le puede llamar con toda propiedad validación [real] de un email.

De hecho, eso es lo que hacen todos los servicios de suscripción serios, nos envían un email que debemos verificar para quedar inscritos definitivamente en sus sitios o en sus listas de distribución.

Me permito mostrar gráficamente los pasos para validar un e-mail. Veremos que lo tratado aquí es apenas la etapa 2/5 de un proceso de validación que comprendería 5 etapas:

  • Etapa 1: El usuario escribe un e-mail
  • Etapa 2: Validación ortográfica del e-mail escrito por el usuario
  • Etapa 3: Verificar si el dominio correspondiente al e-mail validado ortográficamente posee un servidor de e-mail
  • Etapa 4: Enviar una petición (ping) o un email para verificar que el servidor está aceptando e-mails
  • Etapa 5: El e-mail fue recibido correctamente en esa dirección

Hasta que no llegamos a la etapa 5, no podemos decir que el e-mail ha sido validado.

introducir la descripción de la imagen aquí

Si todos modos el OP solicita un método de validación que acepte direcciones con ñ y otros caracteres no definidos hasta el momento por la especificación oficial de w3.org (enlace de más arriba), el regex mencionado en una anterior respuesta funciona.

El código que sigue es el mismo usado en la pregunta, pero implementando por un lado el regex oficial y el regex que permite caracteres latinos tales como la ñ.

document.getElementById('email').addEventListener('input', function() {
    campo = event.target;
    valido = document.getElementById('emailOK');
        
  var reg = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

 var regOficial = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;

    //Se muestra un texto a modo de ejemplo, luego va a ser un icono
    if (reg.test(campo.value) && regOficial.test(campo.value)) {
      valido.innerText = "válido oficial y extraoficialmente";
    } else if (reg.test(campo.value)) {
      valido.innerText = "válido extraoficialmente";

    } else {
      valido.innerText = "incorrecto";

}
});
<p>
    Email:
    <input id="email">
    <span id="emailOK"></span>
</p>

Validación [ortográfica] en HTML5

HTML5 permite declarar nuestro `input`del tipo email y se encarga (en parte) de la validación por nosotros, [como dice MDN][3]:

email: El atributo representa una dirección de correo electrónico. Los saltos de línea se eliminan automáticamente del valor ingresado. Puede ingresarse una dirección de correo no válida, pero el campo de ingreso sólo funcionará si la dirección satisface la producción ABNF 1*( atext / "." ) "@" ldh-str 1*( "." ldh-str ) donde atext está definida en RFC 5322, sección 3.2.3 y ldh-str está definida en RFC 1034, sección 3.5.

Se puede combinar email con el atributo pattern:

pattern : Una expresión regular contra la que el valor es evaluado. El patrón debe coincidir con el valor completo, no solo una parte. Se puede usar el atributo title para describir el patrón como ayuda al usuario. Este atributo aplica cuando el atributo type es text, search, tel, url, email, o password, y en caso contrario es ignorado. El lenguaje de expresión regular es el mismo que el algoritmo RegExp de JavaScript, con el parámetro 'u' que permite tratar al patrón como una secuencia de código Unicode. El patrón no va rodeado por diagonales.

La desventaja es que no todos los clientes son compatibles con HTML5.

<form>
<input type="email" pattern='^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$' title="Entre un email válido"  placeholder="Entre su email">
<input type="submit" value="Submit">
</form>

A. Cedano
  • 95.2k
  • 31
  • 145
  • 257