javascript

Comprobar si es correo electrónico en JavaScript: la forma definitiva

Introducción

Sabemos que la validación del lado del cliente no sirve de mucho, únicamente para indicar al usuario si se ha equivocado en determinada cosa. De todos modos también podemos usar JavaScript del lado del servidor, en donde tendría más sentido validar un correo electrónico en JavaScript.

El punto es que veremos cómo comprobar si un string es un correo electrónico válido usando JavaScript.

Nota: mira aquí cómo validar un email en Python.

El problema y el algoritmo perfecto

No existe un algoritmo perfecto, eso ya debemos saberlo. Existen miles de expresiones regulares, desde las más simples hasta las más complejas. Veremos hoy las maneras recomendadas de hacerlas, pero al final te expones a dos cosas:

  • Permitir que cualquiera ponga un correo electrónico falso
  • Un usuario genuino escriba su correo pero tu expresión regular no lo permita

En fin, veamos las opciones que tenemos.

Validar email o correo electrónico de manera simple

Todos sabemos que un correo electrónico tiene el símbolo del arroba. Este: @. Bueno, podemos hacer una simple validación en donde haya algo antes del arroba, y algo después del arroba. Fácil y sencillo.

Eso quedaría en una expresión regular…

const esCorreoElectronico = correoElectronico => /\S+@\S+/.test(correoElectronico);

Tenemos a una simple función que recibe el correo y devuelve si pasa el test de una expresión regular. Analicemos un poco la expresión.

La \S sirve para representar cualquier cosa, el signo + sirve para indicar que la cosa que está anterior de él puede repetirse 1 o infinitas veces, pero no cero. El @ es literal, o sea, no tiene ningún significado. Y lo que está después del arroba es lo mismo que está antes de él.

Podemos probar a nuestra función y veremos que funciona de maravilla.

const esCorreoElectronico = correoElectronico => /\S+@\S+/.test(correoElectronico);
 
const correosParaProbar = ["foo@bar.baz", "HolaMundo@ejemplo.com", "ejemplo@asd.com", "mark@facebook.com", "pedro@gmail.com", "asd", "123"];
correosParaProbar.forEach(correo => {
    console.log("¿El correo %s es válido? %s", correo, esCorreoElectronico(correo));
});

La salida es:

¿El correo foo@bar.baz es válido? true
¿El correo HolaMundo@ejemplo.com es válido? true
¿El correo ejemplo@asd.com es válido? true
¿El correo mark@facebook.com es válido? true
¿El correo pedro@gmail.com es válido? true
¿El correo asd es válido? false
¿El correo 123 es válido? false

Yo sé que foo@bar.baz probablemente no exista, pero sigue leyendo para que entiendas este punto. Lo que sí vemos es que a los que no llevan arroba no los deja pasar, y tenemos una validación simple. Con esto nos exponemos a tener correos falsos pero eso lo solucionamos más abajo.

Validar correo electrónico con expresión regular

Con esta expresión regular tendrás más oportunidades de eliminar los correos falsos o inventados, pero si tu expresión no entiende algunos de ellos, no los dejará pasar. Avisado estás; no recomiendo este enfoque en lo más mínimo.

const esCorreoElectronico = correoElectronico => /^(([^<>()\[\]\\.,;:\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,}))$/.test(correoElectronico);

Así es, probamos con una expresión más compleja. Los tests son iguales que arriba, y la salida también. Con este método aprovecharías el 99 % de los correos. Fuente.

Validación perfecta

Aquí viene la validación perfecta que no tiene fallas y es más que nada de diseño. ¿Para qué quieres el correo del usuario?

Para que inicie sesión en su cuenta

Muy bien, para que el usuario inicie sesión debe poner un correo. E incluso si no lo validas, debes enviarle un correo de confirmación al momento de registrarse. Además, si pone uno falso o temporal, más tarde no podrá resetear su contraseña o acceder a otras características.

Para mandarle boletines

Lo mismo de arriba, manda un correo de confirmación para que verifique que la dirección de correo electrónico le pertenece. Al final de todo, quien quiera recibir lo que quieres, lo recibirá. Quien no, pues no y ya. Mantén las cosas simples.

Es simplemente un dato de contacto

Aquí igualmente puedes mandar un correo de comprobación y en caso de que el usuario lo verifique, lo registras. Si no, no lo dejas usar tu servicio y ya.

Por otro lado, si alguien más registra el correo (por ejemplo la chica de recursos humanos) debe hacer una pequeña comprobación: los correos más populares son de gmail, hotmail y outlook. Alguien con sentido común no aceptaría el correo foo@bar.baz

Lo que yo recomiendo

Utiliza la validación simple, y siempre envía un correo de confirmación con un token único. Si el usuario es malicioso y pone algo mal es su culpa, pero te aseguras de no molestar a los usuarios genuinos.

Por otro lado, un usuario malicioso o “troll” siempre puede tomar correos de tempmailaddress.com y verificará el correo normalmente como uno genuino.

Es por eso que te digo que al final debemos confiar en que el usuario será genuino, mandar correos de comprobación para terminar el registro, y también podemos mandar correos periódicamente para saber si todavía le interesa estar registrado en nuestro servicio. Esto ya es más en el diseño de nuestra app.

Igualmente si el usuario necesita resetear su contraseña o cosas de esas tendrá que usar, la mayoría de veces, su correo electrónico.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Ver comentarios

Entradas recientes

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

6 días hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

6 días hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

6 días hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

6 días hace

Esperar promesa para inicializar Store de Pinia con Vue 3

En este artículo te voy a enseñar cómo usar un "top level await" esperando a…

6 días hace

Solución: Apache – Server unable to read htaccess file

Ayer estaba editando unos archivos que son servidos con el servidor Apache y al visitarlos…

7 días hace

Esta web usa cookies.