Linea de Codigo

JavaScript » Validar el email con JavaScript

Enero 9, 2009 por Víctor Cuervo . 27319 visitas 37 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.

 
function validarEmail(email){...}

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.

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

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

Visualiza el artículo

Descargar el código

Error en el código

tags: email, expresion regular, RegExp, test, validar

Artículos relacionados:

37 comentarios »

Redifusión RSS de los comentarios de la entrada. TrackBack URI

1 2 3 4 Siguiente »

Linea de Codigo » Extensiones de email: ccTLD
Enero 10, 2009 #
[...] Validar el email con JavaScript [...]
alberto
Marzo 13, 2009 #
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?
luigix
Mayo 28, 2009 #
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})+$/
lineadecodigo
Junio 20, 2009 #
@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.
David
Junio 22, 2009 #
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
Jorge Mera
Julio 6, 2009 #
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);
}
}
lineadecodigo
Julio 6, 2009 #
@Jorge Mera,
Muchas gracias por tu colaboración…
alexander Rodriguez
Agosto 1, 2009 #
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.
ramiro fuentes
Agosto 5, 2009 #
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
Msalmista
Septiembre 18, 2009 #
Las etiquetas de se usan para indicar que lo que está entre las etiquetas es código javascript.