VALIDACIONES CON EXPRESIONES REGULARES

Según wikipedia: Una expresión regular, a menudo llamada también regex, es una secuencia de
caracteres que forma un patrón de búsqueda, principalmente utilizada para la búsqueda de
patrones de cadenas de caracteres u operaciones de sustituciones.

Y esa misma posibilidad se ha añadido al control de validez de cadenas en los formularios de

HTML5. Ahora mediante el atributo pattern, podemos añadir a los <input> de tipo texto como
validación por medio de una expresión regular personalizada.

Imaginemos que queremos incluir en el típico formulario de alta que algunos de los campos como
nombre, apellidos, email, usuario y contraseña pasen una validación de cadena.

Pongamos una serie de condiciones previas para cada uno de los campos:

o Nombre: Admitiremos nombres de cualquier nacionalidad, incluyendo nombres

compuestos y la mayoría de normas de acentuación. El número de caracteres será
como mínimo 3 y como máximo 32. La verdad es que es una expresión regular
ciertamente compleja, pero debemos de tener en cuenta la mayoría de las
posibilidades. Esto nos dejaría un código similar a esto:

<div>

<label for="nombre">Nombre</label>

<input type="text" name="nombre" id="nombre"

pattern="[a-zA-
ZàáâäãåąčćęèéêëėįìíîïłńòóôöõøùúûüųūÿýżźñçčšžÀÁÂÄÃÅĄĆČĖĘÈÉÊËÌÍÎÏĮŁŃÒÓÔÖÕ
ØÙÚÛÜŲŪŸÝŻŹÑßÇŒÆČŠŽ∂ð ,.'-]

{2,48}" required/>

</div>

o Apellidos: Del mismo modo aceptaremos cualquier carácter independientemente

de la nacionalidad, con una tamaño entre 2 y 64 caracteres.

<div>

<label for="apellidos">Apellidos</label>

<input type="text" name="apellidos" id="apellidos"

pattern="[a-zA-ZàáâäãåąčćęèéêëėįìíîïłńòóôöõøùúûüųūÿýżźñçčšžÀÁÂÄÃÅĄ

ĆČĖĘÈÉÊËÌÍÎÏĮŁŃÒÓÔÖÕØÙÚÛÜŲŪŸÝŻŹÑßÇŒÆČŠŽ∂ð ,.'-]{2,64}" required/>

</div>

o Email: HTML5 ya provee de un tipo de campo email, aunque su validación es

bastante pobre. Podríamos complementarla con una expresión más compleja.
 <div>

<label for="correo">Correo electrónico</label>

<input type="email" name="correo" id="correo"

pattern="^([a-zA-Z0-9_-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|

(([a-zA-Z0-9-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$" required/>

</div>

o Usuario: Vamos a solicitar para el usuario de acceso al servicio una cadena de

letras minúsculas, con un número opcionalmente de hasta dos dígitos al final. La
cadena completa tendrá entre 5 y 12 caracteres.

<div>

<label for="usuario">Usuario</label>

<input type="text" name="usuario" id="usuario"

pattern="^([a-z]+[0-9]{0,2}){5,12}$" required/>

</div>

Password: Por último vamos a solicitar una cadena como contraseña, la cual podrá contener letras
mayúsculas, minúsculas, números y los caracteres !?-. Su tamaño: entre 8 y 12 caracteres.

<div>

<label for="pass">Contraseña</label>

<input type="password" name="pass" id="pass" pattern="[A-Za-z0-9!?-]{8,12}" required/>

</div>

Con este sencillo código hemos puesto un ejemplo de formulario que simplemente no realizará el
envío de datos hasta que todas las condiciones no se cumplan. Obviamente todos estos campos
deberán de encontrarse dentro de un formulario HTML para funcionar.

Podrás encontrar más ejemplos de expresiones regulares en esta

URL: http://html5pattern.com/ aunque Internet está plagada de páginas y ejemplos de
expresiones regulares.

Sin embargo no nos vamos a detener aquí. Vamos a comprobar cómo podemos utilizar CSS para
advertir al usuario si el contenido del campo es válido o no.

PSEUDOCLASES EN CSS PARA LA VALIDACIÓN

En CSS3 se añadieron dos pseudoclases relacionadas con la validez de los

campos: :valid e :invalidque nos van a permitir dotar de mayor visibilidad a los errores y aciertos
de los usuarios al completar los formularios. Por supuesto con un soporte desigual entre los
distintos navegadores como verás en el siguiente gráfico:

Añadiendo un poco de CSS podemos hacer que sea un poco más vistoso el resultado válido al
introducir un campo.

input:valid {

background-color: #BBFFF0;

AÑADIENDO UN POCO MÁS DE ESTILO CON FONT AWESOME

Como ya he hablado en otros posts soy un gran fan de las webfonts, que nos permiten incluir
diseño gráfico de forma muy sencilla, fácilmente reutilizables y con una muy baja penalización en
el rendimiento web.

Nuevamente voy a volver a utilizar CSS y Font Awesome para incluir algo más vistoso en la
validación. Para ello incluyo en el header la página un link a Font Awesome.

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

A continuación incluyo el siguiente código HTML después de cada input, con el icono check que
me proporciona Font Awesome.

<i class="fa fa-check check-ok"></i>

Por último solo quedan incluir las siguientes lineas CSS que me permiten por medio del selector de
siblings (hermanos o parientes) mostrar el check cuando el contenido del input sea válido u
ocultarlo cuando no.

.check-ok {

color: lime;

input:invalid ~ .check-ok {

display: none;
}

input:valid ~ .check-ok {

display: inline;

Con esto ya tendremos completamente operativo el formulario, mostrando además un check al

lado del campo en cuanto los datos introducidos sean válidos.

CONCLUSIÓN

En este artículo hemos podido ver cómo las nuevas posibilidades de añadir validación con
expresiones regulares en HTML5 a los campos de formulario han mejorado bastante las
posibilidades y ya no hacen tan imprescindible el uso de JavaScript en formularios pequeños. Sin
embargo, ¿esto hace innecesario JavaScript? Personalmente opino que no, salvo en formularios
muy sencillos como este. Paso a argumentar dicha opinión.

 Se mezclan las capas de validación y presentación en nuestro código. Algo que prefiero
mantener diferenciado teniendo por un lado la capa de presentación en HTML y la
validación con programación Javascript.

 Existen algunos tipos de validaciones que exigen programación. Funciones como por
ejemplo la típica en el que se nos solicita incluir dos veces una contraseña para su
cotejamiento con otro campo del formulario anterior, que sólo es posible realizar por
JavaScript dado que requiere una comparación con otro valor.

 Exige estar repitiendo una y otra vez los patrones en cada campo aunque sean los
mismos.Algo que en las librerías de JavaScript está mucho mejor resuelto. Existen
numerosas librerías, muchas de ellas basadas en jQuery, y que hacen incluso más sencilla
la implementación de validación en formularios sin la necesidad de conocer expresiones
regulares.

 El soporte de ciertos tipos de campos no están implementados en todos los navegadores

o de forma desigual. Además de que aún tenemos un importante número de usuarios que
siguen funcionando con IE9… Lo de siempre: la única manera de mantener un interfaz
unificado todavía sigue siendo el empleo de librerías JS como JQueryUI o validadores
como JQuery Validator.

En cualquier caso aquí dejo el ejemplo y mis reflexiones por si a alguien le interesa. Estoy abierto a
vuestras opiniones y comentarios.
 Validación con expresiones
regulares y Javascript
09 de Enero de 2007 / 27 Comentarios / JAVASCRIPT, TUTORIALES



Las expresiones regulares son modelos que describen las combinaciones de
caracteres en el texto. Se podrían definir como una serie de carácteres que forman un
patrón, que representan a otro grupo de carácteres mayor, de tal forma que podemos
comparar el patrón con otros conjuntos de carácteres para ver las coincidencias. Las
expresiones regulares pueden utilizarse en múltiples lenguajes de programación pero
en esta entrada vamos a ver un ejemplo de validación de formularios mediante
Javascript y haciendo uso de expresiones regulares.

Un buen tutorial para iniciarse en el manejo de expresiones regulares lo podemos

encontrar en Desarrolloweb. Para realizar el ejemplo siguiente no hay porque conocer
en profundidad su manejo. A continuación muestro una serie de tablas a modo de
chuleta para que podamos utilizarlas con un simple corta y pega.
La tabla siguiente contiene los caracteres especiales de las expresiones regulares.

Carácter Texto buscado

^ 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.

Cualquiera de los caracteres entre corchetes. Especifique un rango de caracteres con un guión
[abc]
(por ejemplo, [a-f] es equivalente a [abcdef]).

Cualquier carácter que no esté entre corchetes. Especifique un rango de caracteres con un
[^abc]
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.

Cualquier carácter individual de espacio en blanco (espacios, tabulaciones, saltos de página o

\s
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_].

La tabla siguiente contiene algunos de los patrones más utilizados a la hora de validar
formularios. Si alguien conoce alguna expresión regular más -que pueda ser útil en la
validación de formularios- la puede poner en los comentarios y yo la incorporaré a
esta tabla.

Cualquier letra en [a-z]

minuscula

Entero ^(?:\+|-)?\d+$

Correo electrónico /[\w-\.]{3,}@([\w-]{2,}\.)*([\w-]{2,}\.)[\w-]{2,4}/

URL ^(ht|f)tp(s?)\:\/\/[0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*(:(0-9)*)*(\/?)( [a-zA-Z0-9\-

\.\?\,\'\/\\\+&%\$#_]*)?$

Contraseña segura (?!^[0-9]*$)(?!^[a-zA-Z]*$)^([a-zA-Z0-9]{8,10})$

(Entre 8 y 10 caracteres, por lo menos un digito y un alfanumérico, y no puede
contener caracteres espaciales)

Fecha ^\d{1,2}\/\d{1,2}\/\d{2,4}$
(Por ejemplo 01/01/2007)

Hora ^(0[1-9]|1\d|2[0-3]):([0-5]\d):([0-5]\d)$
(Por ejemplo 10:45:23)

Número tarjeta de ^((67\d{2})|(4\d{3})|(5[1-5]\d{2})|(6011))(-?\s?\d{4}){3}|(3[4,7])\ d{2}-

crédito ?\s?\d{6}-?\s?\d{5}$

Número teléfono ^[0-9]{2,3}-? ?[0-9]{6,7}$

Código postal ^([1-9]{2}|[0-9][1-9]|[1-9][0-9])[0-9]{3}$

Certificado ^(X(-|\.)?0?\d{7}(-|\.)?[A-Z]|[A-Z](-|\.)?\d{7}(-|\.)? [0-9A-Z]|\d{8}(-|\.)?[A-Z])$

Identificación Fiscal

Un ejemplo para controlar que la clave que se introduce sea segura podría ser:

<html >

<head>

<title></title>

<script type="text/javascript">

<!--

function validatePass(campo) {

var RegExPattern = /(?!^[0-9]*$)(?!^[a-zA-Z]*$)^([a-zA-Z0-9]{8,10})$/;

var errorMessage = 'Password Incorrecta.';

if ((campo.value.match(RegExPattern)) && (campo.value!='')) {

 alert('Password Correcta');

} else {

alert(errorMessage);

campo.focus();

//-->

</script>

</head>

<body>

<form action="#" method="post">

<p><input type="text" name="date" onblur="validatePass(this);">

<input name="button" type="button" value="Probar">

<br>

Entre 8 y 10 caracteres, por lo menos un digito y un alfanumérico, y no puede

contener caracteres espaciales

</form>

</body>

</html>
¿Qué son las expresiones regulares?
Odiadas por unos, adoradas por otros… en cualquier caso las expresiones regulares son
siempre útiles y necesarias para validar todo tipo de datos, buscar, encontrarcoincidencias en
cadenas de texto y mucho más.
Si tuviéramos que dar una definición de forma técnica, una expresión regular (o patrón) es
una expresión que describe un conjunto de cadenas sin enumerar sus elementos.

Así pues en una búsqueda de dos caracteres concretos, no importará si número de caracteres
es 10 o un millón, las expresiones regulares nos porporcionarán una solución al problema.
Además de buscar, también podremos saber si una cadena es una fecha, un e-mail, una
dirección web… tan sólo deberemos conocer el patrón necesario a escribir.
A continuación compartimos con todos vosotros 10 expresiones regulares que a buen seguro
usaréis en más de una ocasión y que serán siempre útiles en vuestros proyectos web.
1. Validar una URL
¿Quieres saber si una dirección web es válida? No hay problema con esta expresión regular lo
tendremos muy fácil:
1. /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \?=.-]*)*\/?$/

2. Validar un E-mail
En muchas ocasiones necesitaremos saber si un e-mail con el que se trata de registrar un
usuario es válido:
1. ^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$

3. Comprobar la seguridad de una contraseña

Para aquellos que necesitáis sugerir / comprobar la fortaleza de una contraseña:
1. (?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$

De esta forma comprobaremos:

 Contraseñas que contengan al menos una letra mayúscula.
 Contraseñas que contengan al menos una letra minúscula.
 Contraseñas que contengan al menos un número o caracter especial.
 Contraseñas cuya longitud sea como mínimo 8 caracteres.
 Contraseñas cuya longitud máxima no debe ser arbitrariamente limitada.

4. Validar un número de teléfono

Con este snippet se validarán todos los número de teléfono pertenecientes a los listados en la
Wikipedia:
1. ^\+?\d{1,3}?[- .]?\(?(?:\d{2,3})\)?[- .]?\d\d\d[- .]?\d\d\d\d$

5. Validar número de tarjeta de crédito

Ahora que tan de moda está el e-commerce seguro que esto le vendrá bien a más de uno:
1. ^((67\d{2})|(4\d{3})|(5[1-5]\d{2})|(6011))(-?\s?\d{4}){3}|(3[4,7])\ d{2}-?\s?\d{6}-?\s?\d{5}$

6. Recoger ID de un vídeo de Youtube

Si necesitas recoger el ID de un vídeo de Youtube en sus múltiples combinaciones, esta es tu
expresión regular:
 1. /http:\/\/(?:youtu\.be\/|(?:[a-z]{2,3}\.)?youtube\.com\/watch(?:\?|#\!)v=)([\w-]{11}).*/gi

7. Validar todas las etiquetas de imagen sin cerrar

Ahora que prácticamente todos empleamos xHTML es interesante comprobar que todas
nuestras etiquetas de imagen están correctamente cerradas:
1. <img([^>]+)(\s*[^\/])></img([^>

8. Validar una dirección IP

Si necesitas validar una dirección IP introducida por un usuario, esto te será de gran ayuda:
1. /^(([1-9]?[0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]).){3}([1-9]?[0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/

9. Validar código postal

En muchas ocasiones necesitamos recoger en los formularios de alta el código postal:
1. ^([1-9]{2}|[0-9][1-9]|[1-9][0-9])[0-9]{3}$

10. Validar un nombre de usuario

Si por ejemplo quisiésemos validar un nombre de usuario con un mínimo de 4 caracteres y un
máximo de 15 haríamos lo siguiente:
1. /^[a-z\d_]{4,15}$/i

Además el nombre estaría utilizando sólo caracteres de la A-z y números.