Con el atributo pattern HTML5 podremos delimitar mediante expresiones regulares el contenido insertado por el usuario en los inputs de los formularios.
Sintaxis del atributo pattern HTML5
Vamos a ver la sintaxis de este atributo HTML5 extraída de su web oficial:
|
1 |
<input type="text" name="nombre" pattern="{4-16}"> |
Tal y como podéis ver en el código superior es muy sencillo añadir el atributo, en la sintaxis he puesto que al menos se escriban 4 caracteres y como máximo 16.
Ejemplo del atributo pattern HTML5
Vamos con un ejemplo práctico para ver en funcionamiento la validación por expresión regular:
|
1 2 |
<input type="text" name="pueblo" pattern="[A-Za-z]{4-16}"> <!-- El usuario solo podrá meter una palabra de 4 a 16 caracteres entre la con las letras de A-Z y a-z --> |
Tal y como pongo en el código comentado, solo dejará enviar el formulario cuando se cumpla lo siguiente:
- Que la palabra contenga entre 4 y 6 caracteres.
- Y que los caracteres sean de la ‘A’ a la ‘Z’ siendo mayúsculas o minúsculas.
De no cumplirse la expresión regular sale un mensaje similar a este:
Podéis ver otros ejemplos prácticos en los post de email input HTML5 y tel input HTML5.
Compatibilidad del atributo pattern HTML5
Este atributo es compatible con los siguientes input:
Listado de los nuevos atributos HTML5
En esta otra url tenéis todos los nuevos atributos HTML5 para inputs y formularios.
Listado de los nuevos input HTML5
En esta url tenéis el listado completo de los nuevos input de HTML5.