martes, 24 de julio de 2012

Expresiones Regulares y JavaScript


Es común que en internet hagamos uso de formularios: para hacer compras, para escribir comentarios, para descargar software, suscripciones, etc. Y es muy común que esa información que digitamos sea comprobada por el sitio web para saber si es válida o no, esto con el fin de prevenir que llegue información errónea al servidor.  Así que si agregas algún formulario a tu web, te verás en la necesidad de validarlos.

Por ejemplo si en tu formulario tienes un campo de email, deberás validar si lo que está introduciendo el usuario es realmente un email. Esta comprobación debe hacerse en la maquina cliente y no en el servidor que ya que éste tiene una gran carga de transacciones y es mucho mas rápido y eficiente hacerlo en la máquina cliente.

Para realizar tal efecto, claro está, usaremos lenguajes del lado del cliente como JavaScript para validar si la cadena introducida por el usuario es un email. Y al trabajar con validaciones con cadenas nos usaremos expresiones regulares.

Las expresiones regulares son modelos que describen las combinaciones de caracteres en el texto. Se podrían definir como una serie de caracteres que forman un patrón, que serán reemplazados por la cadena que cumpla con el patrón, de tal forma que podemos comparar el patrón con otros conjuntos de caracteres para ver las coincidencias. 

La expresión regular inicia con /^ y finaliza con $/. 

/^ expresión regular $/

Un email se compone de cuatro partes:

usuario + @ + servidor + dominio

Nombre
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á como 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})+$/


Ahora colocamos la Expresión dentro del código JavaScript:

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

Esta es la métrica para escribir expresiones regulares:
^ Principio de entrada o línea.
$ Fin de entrada o línea.
* El carácter anterior 0 o más veces.
+ El carácter anterior 1 o más veces.
? El carácter anterior una vez como máximo (es decir, indica que el carácter anterior es opcional).
. Cualquier carácter individual, salvo el de salto de línea.
x|y x o y.
{n} Exactamente n apariciones del carácter anterior.
{n,m} Como mínimo n y como máximo m apariciones del carácter anterior.
[abc] Cualquiera de los caracteres entre corchetes. Especifique un rango de caracteres con un guión (por ejemplo, [a-f] es equivalente a [abcdef]).
[^abc] Cualquier carácter que no esté entre corchetes. Especifique un rango de caracteres con un guión (por ejemplo, [^a-f] es equivalente a [^abcdef]).
\b Límite de palabra (como un espacio o un retorno de carro).
\B Cualquiera que no sea un límite de palabra.
\d Cualquier carácter de dígito. Equivalente a [0-9].
\D Cualquier carácter que no sea de dígito. Equivalente a [^0-9].
\f Salto de página.
\n Salto de línea.
\r Retorno de carro.
\s Cualquier carácter individual de espacio en blanco (espacios, tabulaciones, saltos de página o saltos de línea).
\S Cualquier carácter individual que no sea un espacio en blanco.
\t Tabulación.
\w Cualquier carácter alfanumérico, incluido el de subrayado. Equivalente a [A-Za-z0-9_].
\W Cualquier carácter que no sea alfanumérico. Equivalente a [^A-Za-z0-9_].

Mas informacion: expresiones regulares
 

Si te ha gustado esta entrada, comenta es gratis!!! o Suscríbete a nuestro blog. 



3 comentarios:

  1. ¿Cómo podríamos añadir una imagen para decir que es correcto, sin utilizar el alert y otra para incorrecto?

    ResponderEliminar
    Respuestas
    1. con un div en posición absolute que contenga la imagen, debe estar con la propiedad css display:none, luego de la evaluación se muestras el div con la imagen dentro: display:inline, pronto pondré un ejemplo de como manejar la propiedad display respondiendo a eventos.

      Eliminar
    2. claro que en ese div puedes poner lo que sea no solo imágenes.

      Eliminar

Seguidores