Con el atributo pattern HTML5 podremos delimitar mediante expresiones regulares el contenido insertado por el usuario en los inputs de los formularios.
Vamos a ver la sintaxis de este atributo HTML5 extraída de su web oficial:
<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.
Vamos con un ejemplo práctico para ver en funcionamiento la validación por expresión regular:
<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:
De no cumplirse la expresión regular sale un mensaje similar a este:
Este atributo es compatible con los siguientes input:
En esta otra url tenéis todos los nuevos atributos HTML5 para inputs y formularios.
En esta url tenéis el listado completo de los nuevos input de HTML5.