Ejemplo de Validación De Correo Electrónico Con JavaScript

Inicio » JavaScript » Validación de correo electrónico con JavaScript

Muchas veces se nos presenta la necesidad de validar que en un campo determinado de nuestro formulario se ingrese una dirección de correo electrónico válida. En este artículo, aprenderemos cómo validar correos electrónicos utilizando expresiones regulares (también conocidas como regex) en JavaScript.

¿Qué es una expresión regular (regex)?

Una expresión regular es una secuencia de caracteres que define un patrón de búsqueda. En este caso, queremos encontrar un patrón que represente una dirección de correo electrónico válida.

Las expresiones regulares son una herramienta poderosa y flexible para trabajar con cadenas de texto y validar datos de entrada.

Validación de correo electrónico con regex

Para validar que un correo sea válido tenemos que verificar que el formato sea correcto, es decir, que incluya una @ y un dominio. Para ello usamos la siguiente expresión:

var regex = /^[w-]+(.[w-]+)*@[w-]+(.[w-]+)*.[a-zA-Z]{2,}$/;

Ejemplo completo de formulario

En el siguiente ejemplo mostramos cómo validar una dirección de correo electrónico utilizando JavaScript y una expresión regular. Los pasos que seguimos son:

  1. Definimos una función llamada validarCorreo que toma como argumento el correo electrónico a validar.
  2. Creamos una variable regex que contiene la expresión regular para validar el correo electrónico.
  3. Utilizamos el método test() de la expresión regular para verificar si el correo ingresado cumple con el patrón.
  4. Si el correo electrónico es válido, mostramos un mensaje de alerta indicando que es válido; de lo contrario, mostramos un mensaje de alerta indicando que es inválido.
  5. En el HTML, creamos un campo de entrada de tipo "email" y un botón que, al hacer clic, llama a la función validarCorreo con el valor ingresado en el campo de entrada.

<html>
<head>
<title>Validación de correo electrónico con JavaScript (Regex)</title>
<script type="text/javascript">
function validarCorreo(correo) {
// Expresión regular para validar el correo electrónico
var regex = /^[w-]+(.[w-]+)*@[w-]+(.[w-]+)*.[a-zA-Z]{2,}$/;
// Verificar si el correo cumple con el patrón definido por la expresión regular
if (regex.test(correo)) {
alert("Correo electrónico válido");
} else {
alert("Correo electrónico inválido");
}
}
</script>
</head>
<body>
<h2>Validación de correo electrónico con JavaScript y regex</h2>
<input type="email" id="correo" placeholder="Ingrese su correo electrónico">
<button onclick="validarCorreo(document.getElementById('correo').value)">Validar</button>
</body>
</html>

Ventajas y Desventajas de validar con JavaScript

Validar datos de entrada, como direcciones de correo electrónico, utilizando JavaScript en el lado del cliente tiene ventajas y desventajas:

VentajasDesventajas
Retroalimentación inmediata para el usuarioNo es seguro
Menos carga en el servidorCompatibilidad entre navegadores
Mejora la experiencia del usuarioDuplicación de esfuerzo (lado cliente/servidor)
Reducción de tiempo de respuestaNo sustituye la validación en el lado del servidor

Validar datos usando JavaScript no sustituye la validación del lado del servidor. Sin embargo, ayuda a reducir la carga. Para validar datos del lado del servidor te recomiendo leer:

¿Cómo citar? Pichardo, A. & Del Moral, M. (s.f.). Ejemplo de Validación De Correo Electrónico Con JavaScript.Ejemplo de. Recuperado el 26 de Septiembre de 2023 de https://www.ejemplode.com/24-javascript/57-ejemplo_de_validacion_de_correo_electronico_con_javascript.html

Escrito por:
Aziel Pichardo
Ingeniería en Sistemas
Universidad del Estado de Guanajuato
Mauricio del Moral Durán
Mauricio del Moral, fundador y creador de Ejemplo de, es un experto en enseñanza y un apasionado del ámbito educativo desde el año 2007. Ha dedicado una considerable parte de su vida profesional al estudio y al desarrollo de contenidos educativos en formatos digitales de alta calidad. Poseedor de una Licenciatura en Ciencias de la Comunicación, Mauricio es egresado de la prestigiosa Universidad Intercontinental.
Última modificación: 2023-04-15

Últimos 10 comentarios

  1. hola necesito hacer un formulario de un sólo campo que valide un correo electrónico y no se cómo hacerlo, gracias.
    Por mari 2012-05-04 a las 23:44:25
  2. me gustaría que alguien me mostrara un ejemplo de validación de correo (expresión regular) pero de la siguiente forma:

    jonlm@uttt.com.mx

    todo lo que esta después del @ siempre tiene que ir.
    Por jonatha 2012-01-27 a las 16:15:40
  3. Os olvidais de que hay dominios que acaban con cuatro letras, como .info y demás.

    A parte sería bueno validar que lo que hay detrás de la @ sea un dominio que exista para que no valide cosas como:

    usuario@falsodominio.com

    Por un lado hay que validar que los caracteres parezcan un eMail, por otro que sólo haya una única @ y por otro que lo que está tras esa única @ sea un dominio válido (ni idea de como hacer eso en Javascript, con php hay muchos tutoriales, pero en javascript no veo nada al respecto).

    Y para finalizar estaría bueno poder saber si ese usuario es válido en ese dominio, es decir si la dirección de eMail existe.

    Otro tema sería si dicha dirección de eMail es accedida por el usuario o no... para por ejemplo evitar enviar SPAM, para eso lo único que se me ocurre es enviar un eMail solicitando la confirmación de que es válido, mediante la inclusión de una URL única en la que al hacer clic el usuario demuestre que tiene acceso a ese eMail.

    Todo es muy complejo y desde Javascript no veo modo de hacerlo todo, por ejemplo para el caso de que tecleen usuario@google.com ¿cómo se haría en Javascript lo siguiente?:
    -Comprobar que google.com es un dominio existente
    -Comprobar que usuario es cuenta dentro de google.com

    Ni idea, si alguien sabe que lo ponga.

    Lo que si he visto es alguna web que si lo hace, pero por desgracia cuando lo vi fue hace tiempo y no tenía la inquietud de saber cómo, no anoté cual era, lástima, y en el historial tampoco la localizo.
    Lo que si que recuerdo era que te decían donde estaba el servidor de eMail que gestionaba la cuenta con la posible ubicación geográfica (no siempre acertaba) y algunos datos de quién registró la cuenta de eMail.
    Obviamente no probé si funcionaba con todas las posibles direcciones de eMail, pero si con algunas y acertaba bastante, así como un 95% de las veces.
    Por z666zz666z 2011-11-17 a las 8:38:28
  4. Hola buenas tardes. Mi pregunta es si alguno de ustedes podría explicarme cómo funciona este método de validación de correo. A qué se refiere cuando escriben ^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-]+)*[.]([a-z]{2,3})$ para poder modificar este patrón y ocuparlo en una validación X,Y,Z
    Por Jaime 2011-08-30 a las 22:50:18
  5. Si muy bueno el aporte, aunque creo que el patrón correcto debería ser: ^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-]+)*[.]([a-z]{2,3})$
    Para que no de por valido este correo por ejemplo: jaom963@hotmail
    Por Jose Ortega 2011-07-22 a las 19:43:18
  6. Excelente aporte, saludos desde Chile.
    Por Roberto 2011-04-02 a las 14:07:44
  7. por favor necesito que me ayuden
    Por jean jose 2011-03-18 a las 12:07:16
  8. esta bueno tu codigo. gracias
    Por jai 2011-02-14 a las 2:46:29
  9. No cerraste el Head
    Y si es .info ? osea tiene mas de 3 letras

    Ya hice las modificaciones pero sigue sin funcionarme :(
    Por SCorreia 2011-01-30 a las 18:57:12
  10. Buen porte pero me gustaria una validacion con servidores mas utilizados hotmail,gmail,yahoo
    Por Juan 2011-01-26 a las 20:54:17

Deja un comentario


Acepto la política de privacidad.