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

Hay muchas formas de validar una dirección de correo electrónico. Aprenda de la manera correcta y también descubra todas las opciones que tiene, usando JavaScript simple

La validación de una dirección de correo electrónico es una de las operaciones comunes que se realizan al procesar un formulario.

Es útil en formularios de contacto, formularios de registro e inicio de sesión, y mucho más.

Algunas personas sugieren queno debes validar correos electrónicosen absoluto. Creo que un poco de validación, sin tratar de ser demasiado entusiasta, es mejor.

¿Cuáles son las reglas que debe seguir la validación de correo electrónico?

Una dirección de correo electrónico se compone de 2 partes, la parte local y la parte de dominio.

La parte local puede contener

  • cualquier carácter alfanumérico:a-zA-Z0-9
  • puntuación:"(),:;<>@[\]
  • caracteres especiales:!#$%&'*+-/=?^_{|}~
  • un punto., si no es el primer o el último carácter. Además, no se puede repetir

La parte del dominio puede contener

  • cualquier carácter alfanumérico:a-zA-Z0-9
  • el guion-, si no es el primer o el último carácter. Se puede repetir

Utilice una expresión regular

La mejor opción para validar una dirección de correo electrónico es utilizar unExpresión regular.

No hayuniversalregex de verificación de correo electrónico. Todos parecen usar uno diferente, y la mayoría de las expresiones regulares que encuentra en línea fallarán en los escenarios de correo electrónico más básicos, debido a la inexactitud o al hecho de que no calculan los dominios más nuevos introducidos o las direcciones de correo electrónico internacionalizadas.

No uses ninguna expresión regular a ciegas, compruébalo primero.

hiceeste ejemplo en Glitchque verificará una lista de direcciones de correo electrónico consideradas válidas con una expresión regular. Puede cambiar la expresión regular y compararla con otras que desee utilizar.

El que se agrega actualmente es el que considero el más preciso que encontré, ligeramente editado para solucionar un problema con múltiples puntos.

Nota: no se me ocurrió. Lo encontré en una respuesta de Quora, pero no estoy seguro de que sea la fuente original.

Esta es una función que valida el uso de esa expresión regular:

const validate = (email) => {
  const expression = /(?!.*\.{2})^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i

return expression.test(String(email).toLowerCase()) }

Todos los casos comunes están satisfechos, se puede suponer que el 99,9% de las direcciones de correo electrónico que las personas agregarán se validaron correctamente.

El código de esta fallacontiene otras expresiones regulares que puede probar fácilmente mezclando el proyecto.

Aunque es bastante preciso, hay un par de problemas con algunos casos extremos con esta expresión regular, con los que puede vivir (o no) según sus necesidades.

Falso negativo para direcciones extrañas como

"very.(),:;<>[]".VERY."[email protected]\ "very".unusual"@strange.example.com

one.“more\ long”@example.website.place

Falso negativo para direcciones locales:

[email protected]
[email protected]

of little use in publicly accessible websites (actually a plus in publicly accessible websites to have those denied)

Also, false negative for IP-based emails:

[email protected][2001:DB8::1]
[email protected]

There is a false positive for addresses with the local part too long:

123[email protected]example.com

Do you want a simpler regex?

The above regex is very complicated, to the point I won’t even try to understand it. Regular expressions masters created it, and it spread through the Internet until I found it.

Using it at this point is a matter of copy/pasting it.

A much simpler solution is just to check that the address entered contains something, then an @ symbol, and then something else.

In this case, this regex will do the trick:

const expression = /\[email protected]\S+/
expression.test(String('[email protected]').toLowerCase())

This will cause many false positives, but after all the ultimate test on an email address validity happens when you ask the user to click something in the email to confirm the address, and I’d rather try to send to an invalid email than reject a valid email because of an error in my regex.

This is listed in the above Glitch, so you can easily try it.

Validate the HTML field directly

HTML5 provided us the email field type, so don’t forget you can also validate emails using that:

<input type="email" name="email" placeholder="Your email" />

Depending on the browser implementation also this validation will give you different results.

This Glitch shows the same emails I tested the regex with, and their result when validated through the HTML form.

The results are interesting, and here as well we have invalid emails that pass, and valid emails that don’t. Our regex actually does a more accurate job than the HTML filtering built into the browser.

Validate server-side

If your app has a server, the server needs to validate the email as well, because you can never trust client code, and also JavaScript might be disabled on the user browser.

Using Node.js you have the advantage of being able to reuse the frontend code as-is. In this case the function that validates can work both client-side and server-side.

You can also use pre-made packages like isemail, but also in this case results vary. Here is the isemail benchmark on the same emails we used above: https://glitch.com/edit/#!/flavio-email-validation-node-isemail


More js tutorials: