Una expresión regular es una técnica que nos permite identificar si un string coincide con un patrón determinado. Un ejemplo clásico es determinar si un email está correctamente estructurado (sabemos que comienza con uno o más caracteres alfanuméricos, luego el carácter @ seguido de uno o más caracteres alfanuméricos, luego el carácter "." y finalmente otros caracteres alfabéticos)
Hay muchas situaciones donde el operador debe cargar datos que tienen que tener una determinada estructura.
Hasta hace poco solo esto podía resolverse empleando Javascript, pero ahora el HTML5 añade a los controles de formulario la propiedad pattern donde definimos el patrón que debe seguir la cadena que cargue el operador y en caso que no cumpla dicho patrón informar un mensaje de error.
Veremos que para definir expresiones regulares intervienen una serie de caracteres . * +? =! : | \ / () [] {} que tienen un significado especial en la definición del lenguaje de expresiones regulares, estos tipos de caracteres suelen llamarse metacaracteres.
El tema de expresión regular es bastante amplio y complejo en un principio. Lo más adecuado es iniciar con pequeños ejemplos que nos muestren el funcionamiento y la sintaxis.
Confeccionar un formulario que nos solicite la carga obligatoria de un número binario de ocho dígitos.
<!DOCTYPE HTML>
<html>
<head>
<title>Prueba</title>
</head>
<body>
<form action="#">
Ingrese un número binario de ocho dígitos:
<input type="text" id="numero" required pattern="[01]{8}">
<br>
<input type="submit">
</form>
</body>
</html>
Entre corchetes encerramos los caracteres permitidos, en este caso [01] indicamos que los dos únicos caracteres posibles de ingresar dentro del control son el cero y el uno. Seguidamente indicamos entre llaves la cantidad de caracteres que se deben ingresar, en nuestro ejemplo indicamos {8}
Otra cosa que hay que tener muy en cuenta es que debemos agregar la propiedad required. Si no agregamos esta propiedad y el operador dejar vacío el control no valida la expresión regular que hemos dispuesto. Es decir si dejamos vacío el control no se analiza si se ingresó un número binario de ocho dígitos.
Confeccionar un formulario que nos solicite la carga de un número entero decimal que contenga 5 dígitos.
<!DOCTYPE HTML>
<html>
<head>
<title>Prueba</title>
</head>
<body>
<form action="#">
Ingrese un número entero que contenga 5 dígitos:
<input type="text" id="numero" required pattern="[0-9]{5}">
<br>
<input type="submit">
</form>
</body>
</html>
Si bien podíamos enumerar del cero al nueve los caracteres posibles, es mas cómodo indicar un rango de caracteres [0-9] utilizando el guión.
Como vemos la expresión regular queda:
<input type="text" id="numero" required pattern="[0-9]{5}">
Confeccionar un formulario que nos solicite la carga de un número entero decimal que contenga entre 1 y 5 dígitos.
<!DOCTYPE HTML>
<html>
<head>
<title>Prueba</title>
</head>
<body>
<form action="#">
Ingrese un número entero decimal que contenga entre 1 y 5 dígitos:
<input type="text" id="numero" required pattern="[0-9]{1,5}">
<br>
<input type="submit">
</form>
</body>
</html>
En este problema vemos que cuando queremos cargar una cantidad no exacta de valores indicamos entre llaves primero el valor mínimo y luego de una coma el valor máximo:
<input type="text" id="numero" required pattern="[0-9]{1,5}">
Confeccionar un formulario que nos solicite la carga de una patente de un auto. Toda patente cuenta con tres caracteres seguido de tres números
<!DOCTYPE HTML>
<html>
<head>
<title>Prueba</title>
</head>
<body>
<form action="#">
Ingrese su patente:
<input type="text" id="patente" required pattern="[A-Za-z]{3}[0-9]{3}">
<br>
<input type="submit" value="confirmar">
</form>
</body>
</html>
Como vemos primero indicamos entre corchetes que podemos ingresar cualquier caracter alfabético en mayúsculas o minúsculas, luego entre llaves indicamos que solo se pueden cargar 3 de dichos caracteres. Seguimos nuevamente entre corchetes indicando que se puede cargar números entre 0 y 9, indicando entre llaves que deben ser exactamente 3.