Validar dirección de correo con expresiones regulares en JavaScript

Una expresión regular, a menudo llamada también patrón, es una expresión que describe un conjunto de cadenas sin enumerar sus elementos.

Permiten así construir representaciones de caracteres de un lenguaje utilizando operadores de unión, concatenación y operaciones unarias. Cada expresión regular tiene un autómata finito asociado y en JavaScript delimitan su inicio con /^ y su fin con $/.

Alternación Una barra vertical separa las alternativas. Por ejemplo, “marrón|castaño” casa con marrón o castaño.
Cuantificación Un cuantificador tras un carácter especifica la frecuencia con la que éste puede ocurrir. Los cuantificadores más comunes son +, ? y *:
+
El signo más indica que el carácter al que sigue debe aparecer al menos una vez. Por ejemplo, “ho+la” describe el conjunto infinito hola, hoola, hooola, hoooola, etcétera.
?
El signo de interrogación indica que el carácter al que sigue puede aparecer como mucho una vez. Por ejemplo, “obscuro” casa con oscuro y obscuro.
*
El asterisco indica que el carácter que lo precede puede aparecer cero, una, o más veces. Por ejemplo, “0*42″ casa con 42, 042, 0042, 00042, etcétera.
Agrupación Los paréntesis pueden usarse para definir el ámbito y precedencia de los demás operadores. Por ejemplo, “(p|m)adre” es lo mismo que “padre|madre”, y “(des)?amor” casa con amor y con desamor.

 

El objetivo de este post es hacer una experesión para validar el email. Para ello hemos de conocer cuáles son las restricciones de una dirección de correo. Para ello hemos de saber que una dirección de correo se compone de varias partes:

nombre de usuario + @ + servidor + dominio
Nuestra expresión será la que vemos abajo. Analizaremos además que cumple ciertos requisitos que debe cumplir una dirección de email válida:

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

Nombre de usuario y Servidor:

  • Debe de empezar por letra o número.
  • Al menos tiene una letra o número.
  • Puede contener puntos y guiones además de las letras y números.

Es por ello que [a-zA-Z0-9._-]+ hace que se repitan letras (indiferentemente mayúsculas o minúsculas), números, puntos (.), guiones bajos (_) o guiones (-). La función de los corchetes en el lenguaje de las expresiones regulares es representar “clases de caracteres”, o sea, agrupar caracteres en grupos o clases. Además, el +, como ya hemos dicho antes, hace que la expresión aparezca al menos una vez.

En el caso del Servidor, la expresión es la misma, pero sin guion bajo: [a-zA-Z0-9.-]+

@:

Entre las dos expresiones que hemos visto anteriormente, aparece una arroba, la cual es necesaria y aparece sólo una vez.

Dominio:

  • Irá al final, tras un punto.
  • Podrá tener dos letras (.es, .fr, .it,…), tres letras (.com, .net, .org,..) o cuatro (.mobi, info,…).
  • 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.

Como hemos dicho, ([a-zA-Z]{2,4})+ aparece tras un punto, el cual expresamos con \. ya que debemos escapar el carácter.

Si queremos indicar un número concreto de caracteres lo expresamos con el número entre los operadores { y }.

Finalmente todo eso lo indicamos dentro de una función y lo testeamos con JavaScript para que valide dicha expresión. El resultado sería algo como lo siguiente:

1
2
3
4
5
6
7
8
9
10
/**
 * Funcion para validar email
 */
function validarEmail(email) {
    if (/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.([a-zA-Z]{2,4})+$/.test(email)){
        return (true)
    } else {
        return (false);
    }
}

 

Comenta desde Facebook

No olvides dejar tus comentarios