Validar el email con JavaScript

09/Ene/2009 JavaScript 62 Comentarios

Muchas aplicaciones pueden precisar de una validación de email, es decir, validar si lo que está introduciendo el usuario es realmente un email. Esta comprobación es susceptible de hacerse en la maquina cliente, evitando así cargar al servidor con la respectiva comprobación y la consiguiente llamada desde la página web.

Nosotros nos valdremos de JavaScript para validar si la cadena introducida por el usuario es un email. Y al trabajar con validaciones con cadenas nos valdremos de las expresiones regulares.

Toda la implementación del ejercicio estará en montar la expresión regular. Para ello debemos de tener en cuenta varias cosas.

En primer lugar La expresion regular delimita su inicio con /^ y su fin con $/. Por lo que una expresión regular tendría la forma:

/^ expr regular $/

El email se compone de tres partes:

nombre usuario + @ + servidor + dominio

Veamos que consideraciones debemos de tener con cada una de esas partes.

Nombre y servidor

  • Debe de empezar por letra o numero. Al menos tiene una letra o número. La letra o número se expresa mediante el carácter \w. Para asegurarnos de que la letra o número aparece al menos una vez utilizaremos el modificador +.
  • Puede contener puntos y guiones además de las letras y números. Esta combinación podrá aparecer, es por ello que utilizaremos el modificador * (cero o varias veces). Insertaremos toda la combinación entre paréntesis.

Su expresión regular, para ambos casos, será la siguiente:

\w+([\.-]?\w+)*

Dominio

  • Irá al final, detrás de un punto. Podrá tener dos (.es, .fr, .it,...) o tres letras (.com, .net, .org,..) o cuatro (.mobi, info,...). Si queremos indicar un número concreto de caracteres lo expresamos con el número entre los operadores { y }
  • Además podemos tener varios dominios seguidos (.com.ar, .com.uk,....) es por ello que deberemos de usar el modificador +. Ya que el dominio podrá aparecer varias veces.

Su expresión regular será comos sigue:

(\.\w{2,3,4})+

La expresión regular final para validar el email con JavaScript sería:

/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3,4})+$/

Para la implementación de validar el email con JavaScript vamos a crear un formulario, el cual llamará a la función validarEmail. Esta función será la que ejecute la expresión regular.

  1.  
  2. function validarEmail(email){...}
  3.  

La expresión regular la ejecutaremos mediante el método test del objeto RegExp. El objeto RegExp, como su nombre bien indica, representa las expresiones regulares.

  1.  
  2. function validarEmail(valor) {
  3. if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3,4})+$/.test(valor)){
  4. alert("La dirección de email " + valor + " es correcta.");
  5. } else {
  6. alert("La dirección de email es incorrecta.");
  7. }
  8. }
  9.  

Actualizado 20.junio.09
No se había contemplado la gestión de dominios de 4 letras como .mobi o .info.

Vídeos sobre Javascript


62 comentarios en “Validar el email con JavaScript”

Víctor Cuervo

Hector

Me estoy rompiendo la cabeza con esta expresión regular. Podrían decirme si está correcto.
La idea es que solo acepte los servidores de hotmail hasta gmail y cuyo dominio sea .com o .es

/^\w+([\.-]?\w+)*@(?:|hotmail|outlook|yahoo|live|gmail)\.(?:|com|es)$/i.test(mail).val())

Víctor Cuervo

Hector

Buenas noches. Habría un ejemplo en donde solo deje validar correos hotmail y gmail y con dominio .com
Espero que me puedan ayudar, ya que a veces hay graciosos que usan correos temporales.

Víctor Cuervo

OMAR CHAVEZ

De rápido, solo en la función anexaría una lista de dominios a excluir (o incluir) y en un ciclo revisaría,,, seguramente alguno tenga una solución mas rápida pero de entrada haría eso. Pero APARTE, hacer lo mismo en el server, ya que tu pagina puede modificarse al vuelo y quitar la restricción… De hecho haría primero que nada la restricción en el server, y por segunda mano en la página…

Saludos!!!

Víctor Cuervo

Hector

Pero no habría una expresión regular?? Ya que no tengo mucha experiencia con lo que me comentas.

Víctor Cuervo

Jorge

USAR ESTO:

http://es.stackoverflow.com/q/142/127

Permite todas las direcciones válidas.

Víctor Cuervo

Víctor Cuervo

Me alegra mucho escuchar eso. 😀

Víctor Cuervo

Ramon Barbera

Muchas gracias, ha sido util

Víctor Cuervo

seovalencia

Buen post me has aclarado mis dudas, saludos!!!!

Víctor Cuervo

Arturo

Bueno, en mi caso yo la llamo directamente desde el input con el evento “onblur”, para que la llame cada vez que se salga del campo, de esta manera:

Víctor Cuervo

jean

¿como llamo a la funcion en mi formulario?.
help me please.

Víctor Cuervo

Oscar Pacheco

Hola gente.
Primero que nada, quiero agradecer por los aportes.
Ahora les tengo una consulta. Cómo podemos verificar que la dirección realmente exista, no solo que cumpla un formato de correo, sino que exista de verdad!!!

Víctor Cuervo

Arsen

La expresión regular es casi perfecta, pero algo sucede! Al intentar validar una dirección que tiene como dominio tan solo un caracter (user@domain.c por ejemplo) la función queda en bucle
infinito haciendo que se bloque el programa.
Puede Ayudarme Alguien?

Víctor Cuervo

Hernaldo Gonzalez

mi correo no pasaba (naldo@gmail.com) ni otros comunes, asi que la escribi de nuevo:

function validarEmail( email ) {
expr = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if ( !expr.test(email) )
alert(“Error: La dirección de correo ” + email + ” es incorrecta.”);
}

Víctor Cuervo

Jgalera

Hay un error en la expresion regular, debería quedar así:

/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,4})+$/

o si quereis probar otra más entendible a mi parecer:

/^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/

Víctor Cuervo

k4s4c0

Gracias, me ha sido de mucha utilidad 😉

Un saludo,

Víctor Cuervo

Reynaldo

Hello there, I found your blog by means of Google whilst looking for a related matter, your web site came up, it seems to be good.

I’ve bookmarked it in my google bookmarks.
I’m now not certain the place you are getting your info,
but great topic. I needs to spend a while learning more or figuring out more.
Thanks for excellent info I used to be in search of
this information for my mission.

Víctor Cuervo

mercy

validar endereco para contato

Víctor Cuervo

mercy

validar o endereco do imail

Víctor Cuervo

Joshua

Lo probe en Fire Fox y me mandaba siempre erroneo asi que modifique y ya funciona

el codigo segun yo seria el siguiente
function validarEmail(valor) {
alert(valor.value);
if ( /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,4})+$/.test(valor.value)){
alert(“La dirección de email es correcta.”);
} else {
alert(“La dirección de email es incorrecta.”);
}
}

y mi campo

Víctor Cuervo

Omar Chavez

No se que paso, veo raro el codigo,quizas sea mi navegador, pero por si no,aqui repito el codigo correcto…

function validarEmail(valor) {
if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,4})+$/.test(valor)){
alert(“La dirección de email ” + valor + ” es correcta.”);
} else {
alert(“La dirección de email es incorrecta.”);
}
}

Víctor Cuervo

Omar Chavez

alexander Rodriguez tubo 100% razon… y no veo que este actualizado la Aportacion original… yo tube broncas por que la original siempre me daba FALSE la evaluacion, la solucion es quitar el valor intermedio “,3”,quedando asi:


function validarEmail(valor) {
if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,4})+$/.test(valor)){
alert("La dirección de email " + valor + " es correcta.");
} else {
alert("La dirección de email es incorrecta.");
}
}

AUN ASI, mil gracias por el aporte…. estubo excelente, una vez mas Gracias alexander Rodriguez por la observacion!!!
🙂

Víctor Cuervo

fabian

si si!!!! esta funciona gracias!!!!

Víctor Cuervo

Antonio

El regex ^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3,4})+$
quedaría tal cual para matches() de java??

Víctor Cuervo

Víctor Cuervo

@rolando,

Muchas gracias por el comentario. Nos alegra que esté bien explicado. 😀

Víctor Cuervo

rolando

voy a provar el script, por cierto esta muy bien explicado.

Víctor Cuervo

Víctor Cuervo

@Javier, Muchas gracias por el código.

Víctor Cuervo

Javier

Mejorando aun mas la funcion quitando el if que retorne el valor boolean del test

return /^((([a-z]|\d|[!#\$%&’\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&’\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\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]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([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])))\.?$/.test(valor);

Víctor Cuervo

Víctor Cuervo

@programador, gracias por el aporte.

Víctor Cuervo

programador

A mi esto me funciona perfecto:

function esEmailCorrecto (email) {
return (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\D{2,4})+$/.test(email));
}

Víctor Cuervo

Julian Lasso

No me sirvió esa expresión regular pero esta otra trabaja perfecto
/^([a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4})*$/

Víctor Cuervo

Carlos

Hola, no se si es un bug, pero en donde limitas {2,3,4} hay un error pues no me acepta dominios con terminacion de 4 digitos .mobi por ejemplo,modifiqué el script de esta manera y si funciona {2,4}.

Saludos.

Víctor Cuervo

den

espero que le sirva

Víctor Cuervo

den

function checkear_datos () {

if ((/^[A-Za-z][A-Za-z0-9_]*@[A-Za-z0-9_]+\.[A-Za-z0-9_.]+[A-za-z]$/.test(document.forms.registro.email.value))) {
alert(‘El E-Mail ingresado es inválido!’);return false;}

Víctor Cuervo

chuy

hola necesito validar un correo electronico, donde solo pueda ingresar 1 @, 1 ., q el @ no vaya ni al principio ni al final, y q no use caracteres especiales

Víctor Cuervo

iroh

observacion:

creo que para que alguna funcione correctamente, seria menester saber como la hemos invocado desde los formularios para que funcione, talvez de esa forma se solucione la demanda de este codigo.

lo digo porque a mi me funciono empleando el codigo que postie mas arriba, pero recuerdo que lo hice en un script aparte, el que invoque desde el formulario por medio de javascript :S

Víctor Cuervo

Pablo

Pruben lo siguiente:

html:

Javascript:
function valcorreo(valor) {
alert(valor.value);
if (/^((([a-z]|\d|[!#\$%&’\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&’\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\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]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([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])))\.?$/.test(valor.value)){
mailValido = 1;
} else {
mailValido = 0;
}
alert(mailValido);
}

Víctor Cuervo

nako

NO funcionana, esa es la verdad, por favor uan q funciones…gracias

Víctor Cuervo

Bruno_83

Hola a mi me manda el mensaje de que la direccion es incorrecta siempre, es como si no hiciera la verificacion del: If(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3,4})+$/.test(valor)), ya lei e intente todas las otras formas que los usuarios dan pero ninguna me sirve, y por cierto lei lo del RegExp y no se si necesito alguna libreria extra o ya esta por default, gracias

Víctor Cuervo

Rafael Perez

La función mejorada que publicó “6. Jorge Mera – Julio 6, 2009” funciona perfectamente. Gracias Jorge. Saludos.

Víctor Cuervo

iroh

creo que en ese caso, deberias recurrir a lo que se puede hacer para estos casos…

deberias de intentar ver el codigo fuente de clientes de correo como por ejemplo hotmail, yahoo, gmail, etc cuando ingresas varios destinatarios al enviar un email…

eso o cabesearte modificando el codigo para lograr tu cometido ^^

o, con san google buscar las palabras adecuadas para dar con lo que quieres, creo yo.

Víctor Cuervo

Edward

Que pasa si quiero validar varias direcciones de correo separadas por coma(,) o punto y coma (;) dentro de una misma cadena?

Víctor Cuervo

Iroh

Asi lo solucione muchachos ^^ :

function Valida_Email(valor)
{
var s = valor.value;
var filtro=/^[A-Za-z][A-Za-z0-9_]*@[A-Za-z0-9_]+\.[A-Za-z0-9_.]+[A-za-z]$/;
if (s.length == 0 ) return true;
if (filtro.test(s))
return true;
else
alert(“Ingrese una dirección de correo válida”);
valor.focus();
return false;
}

se supone que valor.value viene del formulario en el cual se ha llamado, entonces la variable s recoge ese valor y comienza su proceso de verificacion al interior de la expresion regular.

espero que sirva a todos, saludos muchachos ^^

Iroh

Víctor Cuervo

PepoRuizMx

como aportación, la expresión regular la modifiqué de ésta forma y me ha funcionado muy bien… solo agregué las diagonales en el – y _ y me acepta correos tales como los que menciona marcela

macela.godoy@usach.cl
m_godoy@usach.cl
m-godoy@usach.cl

aqui les dejo mi expresión regular.

/^\w+([\.\-\_]?\w+)*@\w+([\.-]?\w+)*(\.\D{2,4})+$/

Si alguien encuentra algun error, comentenlo para modificarlo…

Salu2

Víctor Cuervo

PepoRuiz

Compañeros, todos hemos pasado rompiéndonos la cabeza para encontrar una expresión regular que nos funcione… les dejo una página donde pueden encontrar algunas soluciones:
http://regexlib.com/DisplayPatterns.aspx
vayan a la seccion EMAIL y obtendrán muchas respuestas…

que tengan un excelente dia…

Víctor Cuervo

Jinx

Lo probé, y no funciona, y me estoy volviendo loco. Agarré el Visual Web Developer, copié la función de validación y aún así no anda.
Alguien que sepa como hacerlo, que lo diga. En este caso, probado desde el link que se provee, sigue dando que el mail es incorrecto.

Víctor Cuervo

iroh

“Amigo la forma propuesta [a-Z]{2,4} para aceptar sólo letras al final del dominio es incorrecta, para lograr el mismo efecto y evitar números debe usarse \D{2,4} en vez de \w{2,4}

Lo anterior aceptará sólo letras. Está probado”

lo he probado asi y nada de nada man, sigue mandando el mensaje que le puse que estaba incorrecto, ademas la funcion la he implementado de la siguiente forma por si a alguien le interesa:

if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\D{2,4})+$/.test(valor))
{
alert(“El Email ingresado es incorrecto.”);
Email.focus();
Email.select();
return false;
}

aun de esta forma, aplicando el cambio de alexander y de ControlCalidad no funciona, me sigue mandando el mensaje que le pedi me mandara cuando esta erroneo el email… :/

Víctor Cuervo

usuario de paso

(sorry, sólo me estoy incribiéndome para recibir comentarios)

Víctor Cuervo

ControlCalidad

Amigo la forma propuesta [a-Z]{2,4} para aceptar sólo letras al final del dominio es incorrecta, para lograr el mismo efecto y evitar números debe usarse \D{2,4} en vez de \w{2,4}

Lo anterior aceptará sólo letras. Está probado
Saludos

Víctor Cuervo

jLNX

OOO ME FUNCIONÓ GENIAL…. JUSTAMENTE LO QUE BUSCABA MUCHAS GRACIAS

Víctor Cuervo

Cyrus

Por completar un poco más, yo creo que el dominio principal, .es .com .mobi no puede tener números, se podria ajustar un poco mas poniendo [a-Z]{2,4} en vez de \w{2,4}.

Víctor Cuervo

Cesar

Hola, lo que pasa es que siempre me sale que el correo esta incorrecto cuando el correo esta bien, depronto algo le falta al codigo, gracias.

Víctor Cuervo

marcela

Estimados y que pasa cuando el mail tiene un “_” , “-“, “.” por ejemplo

macela.godoy@usach.cl
m_godoy@usach.cl
m-godoy@usach.cl

que pasa en esos casos. por que por el momento me da error en todos esso casos-
gracias,.

Víctor Cuervo

Raul

La expresion que dejo alexander funciona bien, funciona mejor que la original

Víctor Cuervo

Msalmista

Las etiquetas de se usan para indicar que lo que está entre las etiquetas es código javascript.

Víctor Cuervo

ramiro fuentes

hola amigos quisiera saber que significan las etiquetas que dicen “script” gracias se uqe son para formatear texto html pero no se par que las usan en el con javascript

Víctor Cuervo

alexander Rodriguez

hola que tal
miren el codigo presenta un error
es el siguiente
esta escrito de esta manera /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3,4})+$/
y tien que estar de estra otra /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,4})+$/ si lo prueban varan la diferencia
ademas la visualizacion del codigo tiene problemas en el if le falta un par de llaves pra separar el -esls- del resto de la funcion.

Víctor Cuervo

lineadecodigo

@Jorge Mera,

Muchas gracias por tu colaboración…

Víctor Cuervo

Jorge Mera

Mejorando la funcion:

function valcorreo(valor) {
if (/^((([a-z]|\d|[!#\$%&’\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&’\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\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]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([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])))\.?$/.test(valor)){
return (true)
} else {
return (false);
}
}

Víctor Cuervo

David

Saludos, quiero hacer una función javascript para validar varios mails que sean ingresados en la caja de texto separados por ;

Me pueden ayudar con eso

Muchas Gracias

Víctor Cuervo

lineadecodigo

@luigix,

Muy buena apreciación. El código estaba escrito desde hace muchísimo y al publicarlo no caí en ese punto. Tienes toda la razón del mundo.

Paso a corregirlo.

Víctor Cuervo

luigix

dices que después del punto el dominio puede ser de 2 o 3 letras (.es o .com) por ejemplo, pero también existen los de 4 (.info, .mobi).

¿ Quedaría entonces la expresión regular así ?
/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3,4})+$/

Víctor Cuervo

alberto

a veces se pide que reescriban el e-mail por seguridad de que esta correctamente escrito

¿como hacer para que no puedan PEGAR (ctrl+v) el e-mail en una caja de texto?

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*