Todo desarrollador web conoce la sensación: ha creado un formulario y deja escapar un gemido cuando se da cuenta de que ahora tiene que validar cada campo.
Afortunadamente, la validación de formularios no tiene por qué ser dolorosa. Puede usar expresiones regulares para manejar muchas necesidades de validación comunes.
¿Qué son las expresiones regulares?
Las expresiones regulares describen patrones que coinciden con combinaciones de caracteres en cadenas. Puede usarlos para representar conceptos como "solo números" o "exactamente cinco letras mayúsculas".
Las expresiones regulares (también llamadas regex) son herramientas poderosas. Tienen muchos usos, incluidas operaciones de búsqueda avanzada, buscar y reemplazar y validación en cadenas. Una famosa aplicación de las expresiones regulares es el comando grep en Linux.
¿Por qué utilizar expresiones regulares para la validación?
Hay muchos formas de validar la entrada del formulario, pero las expresiones regulares son simples, rápidas y convenientes de usar si comprende cómo hacerlo.
JavaScript tiene soporte nativo para expresiones regulares. Esto significa que usarlos para la validación en lugar de una biblioteca externa ayuda a mantener el tamaño de su aplicación web lo más pequeño posible.
Las expresiones regulares también son capaces de validar muchos tipos de entrada de formulario.
Conceptos básicos de las expresiones regulares
Las expresiones regulares consisten en símbolos que describen patrones formados por caracteres en una cadena. En JavaScript, puede crear un literal de expresión regular escribiéndolo entre dos barras diagonales. La forma más simple de una expresión regular se ve así:
/abc/La expresión regular anterior coincidirá con cualquier cadena que incluya los caracteres "a", "b" y "c" en ese orden, consecutivamente. La cadena "abc" coincidirá con esa expresión regular, así como con una cadena como "abcdef".
Puede describir patrones más avanzados utilizando caracteres especiales en sus expresiones regulares. Los caracteres especiales no representan un carácter literal, pero hacen que su expresión regular sea más expresiva.
Puede usarlos para especificar que una parte del patrón debe repetirse un cierto número de veces, o para indicar que parte del patrón es opcional.
Un ejemplo de un carácter especial es "*". El carácter "*" modifica un solo carácter o un grupo de caracteres que le preceden. Declara que esos caracteres pueden estar ausentes o pueden repetirse cualquier número de veces seguidas. Por ejemplo:
/abc*/
Coincidirá con "ab" seguido de cualquier número de caracteres "c". La cadena "ab" es un ejemplo válido de ese patrón, porque el carácter "c" es opcional. Las cadenas "abc" y "abccccc" son igualmente válidas, porque el "*" significa que "c" puede repetirse cualquier número de veces.
La sintaxis completa de expresiones regulares utiliza varios caracteres de patrón más para describir posibles coincidencias. Puedes aprender más de Reglas regulares 101 de regexlearn.com curso interactivo. Guía JavaScript de MDN también es muy útil.
Validación de formularios con expresiones regulares
Puede usar expresiones regulares para validar la entrada del formulario de varias maneras. La primera forma es usar JavaScript. Implica unos pocos pasos:
- Obtenga el valor de la entrada del formulario.
- Compruebe si el valor de la entrada coincide con la expresión regular.
- Si no es así, muestre al usuario del sitio web que el valor del campo de entrada no es válido.
He aquí un breve ejemplo. Dado un campo de entrada como este:
<marcador de posición de entrada ="Campo de entrada">Puedes escribir una función para validarlo así:
funciónvalidar() {
dejar valor = documento.querySelector("entrada").valor;
constante expresión regular = /^.{3,7}$/;
devolver regEx.test (valor);
}Otra forma es aprovechar las capacidades de validación de formularios HTML del navegador. ¿Cómo? Especificando expresiones regulares como el valor del atributo de patrón de la etiqueta de entrada HTML.
El atributo de patrón solo es válido para los siguientes tipos de entrada: texto, teléfono, correo electrónico, URL, contraseña y búsqueda.
Aquí hay un ejemplo usando el atributo de patrón:
<forma>
<marcador de posición de entrada ="Campo de entrada" patrón requerido ="/^.{3,7}$/">
<botón>Enviar</button>
</form>Si envía el formulario y el valor de la entrada no coincide con la expresión regular completa, el formulario mostrará un error predeterminado que se ve así:
Si la expresión regular proporcionada al atributo de patrón no es válida, el navegador ignorará el atributo.
Patrones Regex comunes para la validación de formularios
Tener que construir y depurar expresiones regulares desde cero puede llevar algún tiempo. Aquí hay algunas declaraciones de expresiones regulares que puede usar para validar algunos de los tipos más comunes de datos de formulario.
Expresión regular para validar la longitud de la cadena
Uno de los requisitos de validación más comunes es una restricción en la longitud de una cadena. La expresión regular que coincidirá con una cadena de siete caracteres es:
/^.{7}$/Los "." es un marcador de posición que coincide con cualquier carácter, y el "7" entre llaves especifica el límite de longitud de la cadena. Si la cadena tuviera que estar dentro de un cierto rango de longitud, como entre tres y siete, la expresión regular se vería así:
/^.{3,7}$/Y si la cadena necesitara tener al menos tres caracteres sin límite superior, se vería así:
/^.{3,}$/Es poco probable que la longitud sea el único requisito de validación para la entrada de un formulario. Pero a menudo lo usará como parte de una expresión regular más complicada que incluye otras condiciones.
Expresión regular para validar campos de solo letras
Algunas entradas de formulario deben contener nada más que letras para ser válidas. La siguiente expresión regular solo coincidirá con dichas cadenas:
/^[a-zA-Z]+$/Esta expresión regular especifica un conjunto de caracteres compuesto por todo el alfabeto. El carácter especial "+" significa que el carácter anterior debe aparecer al menos una vez, sin límite superior.
Expresión regular para validar campos de solo números
La siguiente expresión regular solo coincidirá con cadenas compuestas completamente de dígitos:
/^\d+$/La expresión regular anterior es esencialmente la misma que la anterior. La única diferencia es que usa un carácter especial "\d" para representar el rango de dígitos, en lugar de escribirlos.
Expresión regular para validar campos alfanuméricos
Las expresiones regulares también facilitan la validación de campos alfanuméricos. Aquí hay una expresión regular que solo coincidirá con cadenas formadas por letras y dígitos:
/^[a-zA-Z\d]+$/Algunos campos son alfanuméricos, pero permiten algunos otros caracteres como guiones y guiones bajos. Un ejemplo de tales campos es un nombre de usuario. A continuación se muestra una expresión regular que coincide con una cadena formada por letras, dígitos, guiones bajos y guiones:
/^(\w|-)+$/El carácter especial "\w" coincide con toda una clase de caracteres, como lo hace "\d". Representa el rango del alfabeto, los dígitos y el carácter de subrayado ("_").
Expresión regular para validar números de teléfono
Un número de teléfono puede ser un campo complicado de validar porque diferentes países usan diferentes formatos. Un enfoque muy general es asegurarse de que la cadena contenga solo dígitos y que su longitud esté dentro de un cierto rango:
/^\d{9,15}$/Un enfoque más sofisticado podría parecerse a este tomado de MDN, que valida los números de teléfono en el formato ###-###-####:
/^(?:\d{3}|\(\d{3}\))([-\/\.])\d{3}\1\d{4}$/Expresión regular para validar fechas
Al igual que los números de teléfono, las fechas también pueden tener múltiples formatos. Las fechas suelen ser menos complicadas de validar que los números de teléfono. ¿Por qué? Las fechas no contienen más caracteres que dígitos y guiones.
Aquí hay un ejemplo que validará las fechas del formato "DD-MM-YYYY".
/^\d{2}-\d{2}-\d{4}$/Validar con Regex es fácil
Las expresiones regulares describen patrones que coinciden con combinaciones de caracteres en cadenas. Tienen una variedad de aplicaciones, como validar la entrada del usuario desde formularios HTML.
Puede usar expresiones regulares para validar con JavaScript o mediante el atributo de patrón HTML. Es fácil construir expresiones regulares para validar tipos comunes de entradas de formulario como fechas y nombres de usuario.