HTML5 Atributo pattern avanzado

html5-logo-pequeno  Aprendiendo HTML5     html5-logo-pequeno

Bueno amigos, en el post anterior vimos como se trabaja con el atributo pattern de forma basica, puesto que solo
hicimos un ejemplo de como se valida un campo numérico (pattern=”[0-9]+”). Pues bien cabe decir que el atributo pattern es flexible al programador, es decir permite que nosotros diseñemos nuestros propios patrones de validación.

Veamos algunos ejemplos que nos pueden llegar a servir y sacarnos de apuros de vez en cuando :).

1) validar solo letras minúsculas

1
2
3
<form><label>letras minúsculas</label>
<input name="campo" pattern="[a-z]+" required="" type="text" />
<input name="enviar" type="submit" value="enviar" /></form>

2) validar solo letras Mayúsculas

1
2
3
<form><label>letras mayúsculas</label>
<input name="campo" pattern="[A-Z]+" required="" type="text" />
<input name="enviar" type="submit" value="enviar" /></form>

3) letras minúsculas y máximo 6 caracteres permitidos

1
2
3
<form><label>letras minúsculas, máximo 6 caracteres permitidos</label>
<input name="campo" pattern="[a-z]{6}" required="" type="text" />
<input name="enviar" type="submit" value="enviar" /></form>

4) letras minúsculas, entre 4 y 6 caracteres permitidos

1
2
3
<form><label>letras minusculas, entre 4 y 6 caracteres permitidos</label>
<input name="campo" pattern="[a-z]{4,6}" required="" type="text" />
<input name="enviar" type="submit" value="enviar" /></form>

5) letras mayúsculas, espacios permitidos

1
2
3
<form><label>letras mayúsculas,espacios permitidos</label>
<input name="campo" pattern="[A-Z ]+" required="" type="text" />
<input name="enviar" type="submit" value="enviar" /></form>
Si este post fue de ayuda para ti, no olvides dejar un comentario, también puedes contar tu experiencia o lo que estés haciendo. Nos ayuda a seguir creciendo. ¡Vamos!, solo te llevará 1 minuto.

Un comentario

  1. carlos Contestar

    como hago para permitir una serie de numero y un solo espacio entre ellos, gracias!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *