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.
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>
