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>