Pregunta ¿Cómo validar una dirección de correo electrónico en JavaScript?


¿Cómo se puede validar una dirección de correo electrónico en JavaScript?


3244


origen


Respuestas:


Utilizando expresiones regulares es probablemente la mejor manera. Puedes ver un montón de pruebas aquí (tomado de cromo)

function validateEmail(email) {
    var re = /^(([^<>()\[\]\\.,;:\[email protected]"]+(\.[^<>()\[\]\\.,;:\[email protected]"]+)*)|(".+"))@((\[[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,}))$/;
    return re.test(String(email).toLowerCase());
}

Aquí está el ejemplo de expresión regular que acepta Unicode:

var re = /^(([^<>()\[\]\.,;:\[email protected]\"]+(\.[^<>()\[\]\.,;:\[email protected]\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\[email protected]\"]+\.)+[^<>()[\]\.,;:\[email protected]\"]{2,})$/i;

Pero tenga en cuenta que uno no debe confiar únicamente en la validación de JavaScript. JavaScript se puede deshabilitar fácilmente. Esto también debe validarse en el lado del servidor.

Aquí hay un ejemplo de lo anterior en acción:

function validateEmail(email) {
  var re = /^(([^<>()[\]\\.,;:\[email protected]\"]+(\.[^<>()[\]\\.,;:\[email protected]\"]+)*)|(\".+\"))@((\[[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,}))$/;
  return re.test(email);
}

function validate() {
  var $result = $("#result");
  var email = $("#email").val();
  $result.text("");

  if (validateEmail(email)) {
    $result.text(email + " is valid :)");
    $result.css("color", "green");
  } else {
    $result.text(email + " is not valid :(");
    $result.css("color", "red");
  }
  return false;
}

$("#validate").bind("click", validate);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  <p>Enter an email address:</p>
  <input id='email'>
  <button type='submit' id='validate'>Validate!</button>
</form>

<h2 id='result'></h2>


3779



Solo para completar, Aquí tienes otra expresión regular compatible con RFC 2822

El estándar oficial se conoce como RFC 2822. Describe la sintaxis que deben cumplir las direcciones de correo electrónico válidas. Usted puede (pero no deberías - leer en) implementarlo con esta expresión regular:

(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])

(...) Obtenemos una implementación más práctica de RFC 2822 si omitimos la sintaxis mediante comillas dobles y corchetes. Todavía igualará el 99.99% de todas las direcciones de correo electrónico en uso hoy en día.

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

Otro cambio que podría hacer es permitir cualquier dominio de nivel superior de código de país de dos letras, y solo dominios genéricos de nivel superior específicos. Esta expresión regular filtra direcciones de correo electrónico falsas como [email protected]. Tú deberá actualizarlo a medida que se agreguen nuevos dominios de nivel superior.

[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+(?:[A-Z]{2}|com|org|net|gov|mil|biz|info|mobi|name|aero|jobs|museum)\b

Por lo tanto, incluso si se siguen los estándares oficiales, aún se deben realizar intercambios. No copie ciegamente expresiones regulares de bibliotecas en línea o foros de discusión. Siempre pruébelos en sus propios datos y con sus propias aplicaciones.

Énfasis mío


609



He modificado ligeramente la respuesta de Jaymon para las personas que quieren una validación realmente simple en la forma de:

[email protected]

La expresión regular:

/\[email protected]\S+\.\S+/

Ejemplo de función de JavaScript:

function validateEmail(email) 
{
    var re = /\[email protected]\S+\.\S+/;
    return re.test(email);
}

548



Hay algo que debes entender en el momento en que decides usar una expresión regular para validar los correos electrónicos: Probablemente no sea una buena idea. Una vez que hayas aceptado eso, hay muchas implementaciones que pueden llevarte a la mitad, este artículo los resume muy bien.

En resumen, sin embargo, la única forma de estar total y absolutamente seguro de que lo que el usuario ingresó es, de hecho, un correo electrónico es enviar un correo electrónico y ver qué sucede. Aparte de eso, todo es solo conjeturas.


292



Wow, hay mucha complejidad aquí. Si todo lo que quiere hacer es capturar los errores de sintaxis más obvios, haría algo como esto:

\[email protected]\S+

Por lo general, capta los errores más obvios que comete el usuario y asegura que la forma es en su mayoría correcta, que es de lo que se trata la validación de JavaScript.


280



HTML5 en sí tiene validación de correo electrónico. Si su navegador es compatible con HTML5, puede usar el siguiente código.

<form><input type="email" placeholder="[email protected]">
    <input type="submit">
</form>

jsFiddle enlazar

Desde el Especificación de HTML5:

UN dirección de e-mail válida es una cadena que coincide con el emailproducción del siguiente ABNF, cuyo juego de caracteres es Unicode.

email   = 1*( atext / "." ) "@" label *( "." label )
label   = let-dig [ [ ldh-str ] let-dig ]  ; limited to a length of 63 characters by RFC 1034 section 3.5
atext   = < as defined in RFC 5322 section 3.2.3 >
let-dig = < as defined in RFC 1034 section 3.5 >
ldh-str = < as defined in RFC 1034 section 3.5 >

Este requisito es un violación deliberada de RFC 5322, que define una sintaxis para las direcciones de correo electrónico que a la vez es demasiado estricta (antes del carácter "@"), demasiado vaga (después del carácter "@") y demasiado laxa (permitiendo comentarios, espacios en blanco y citas cadenas de maneras desconocidas para la mayoría de los usuarios) para ser de uso práctico aquí.

La siguiente expresión regular compatible con JavaScript y Perl es una implementación de la definición anterior.

/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-][email protected][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])?)*$/

165



He encontrado que esta es la mejor solución:

/^[^\[email protected]][email protected][^\[email protected]]+\.[^\[email protected]]+$/

Permite los siguientes formatos:

1. [email protected]
2. [email protected]
3. [email protected]
4. othe[email protected]
9. #!$%&'*+-/=?^_`{}|[email protected]
6. "() []:,; @ \\\"! # $% & '* + - / =? ^ _ `{} | ~ .a "@ example.org
7. "" @ example.org (espacio entre las comillas)
8. üñîçøðé@example.com (caracteres Unicode en la parte local)
9. üñîçøðé@üñîçøðé.com (caracteres Unicode en la parte del dominio)
10. Pelé@example.com (latín)
11. δοκιμή@παράδειγμα.δοκιμή (Griego)
12. 我 買 @ 屋企. 香港 (chino)
13. 甲 斐 @ 黒 黒. 日本 (Japonés)
14. чебурашка@ящик-с-апельсинами.рф (cirílico)

Es claramente versátil y permite los personajes internacionales más importantes, mientras sigue aplicando el formato básico [email protected] Bloqueará espacios que están técnicamente permitidos por RFC, pero son tan raros que estoy feliz de hacer esto.


95



En los navegadores modernos puede construir sobre la respuesta de @ Sushil con JavaScript puro y DOM:

function validateEmail(value) {
  var input = document.createElement('input');

  input.type = 'email';
  input.required = true;
  input.value = value;

  return typeof input.checkValidity === 'function' ? input.checkValidity() : /\[email protected]\S+\.\S+/.test(value);
}

He creado un ejemplo en el violín http://jsfiddle.net/boldewyn/2b6d5/. Combinado con la detección de características y la validación escueta de Respuesta de Squirtle, te libera de la masacre de expresión regular y no se encrespa en navegadores antiguos.


76



JavaScript puede coincidir con una expresión regular:

emailAddress.match( / some_regex /);

Aquí hay un RFC22 expresión regular para correos electrónicos:

^((?>[a-zA-Z\d!#$%&'*+\-/=?^_`{|}~]+\x20*|"((?=[\x01-\x7f])[^"\\]|\\[\x01-\x7f])*
"\x20*)*(?<angle><))?((?!\.)(?>\.?[a-zA-Z\d!#$%&'*+\-/=?^_`{|}~]+)+|"((?=[\x01-\x
7f])[^"\\]|\\[\x01-\x7f])*")@(((?!-)[a-zA-Z\d\-]+(?<!-)\.)+[a-zA-Z]{2,}|\[(((?(?<
!\[)\.)(25[0-5]|2[0-4]\d|[01]?\d?\d)){4}|[a-zA-Z\d\-]*[a-zA-Z\d]:((?=[\x01-\x7f])
[^\\\[\]]|\\[\x01-\x7f])+)\])(?(angle)>)$

63