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.
|
[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_].
|
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 minuscula | [a-z] |
| 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 crédito
|
^((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}$
|
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 Identificación Fiscal
|
^(X(-|\.)?0?\d{7}(-|\.)?[A-Z]|[A-Z](-|\.)?\d{7}(-|\.)? [0-9A-Z]|\d{8}(-|\.)?[A-Z])$
|
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>
