Ejemplo
Un formulario HTML con un campo de entrada que puede contener sólo tres letras (no hay números o caracteres especiales):
<form action="demo_form.asp">
Country code: <input type="text" name="country_code"
pattern="[A-Za-z]{3}"
title="Three letter country code">
<input type="submit">
</form>
Inténtalo tú mismo " Más "hacerlo por uno mismo" ejemplos a continuación.
Definición y Uso
El pattern atributo especifica una expresión regular que el <input> valor del elemento se compara.
Nota: El pattern atributo trabaja con los siguientes tipos de entrada: text, date, search, url, tel, email y password .
Consejo: Utilice el mundial title atributo para describir el patrón para ayudar al usuario.
Consejo: Más información sobre expresiones regulares en nuestro tutorial JavaScript.
Soporte para el navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el atributo.
| Atributo | |||||
|---|---|---|---|---|---|
| pattern | 5.0 | 10.0 | 4.0 | No soportado | 9.6 |
Diferencias entre HTML 4.01 y HTML5
El pattern atributo es nuevo en HTML5.
Sintaxis
<input pattern="regexp">
Los valores de atributo
| Valor | Descripción |
|---|---|
| regexp | Especifica una expresión regular que el <input> valor del elemento se compara |
Más ejemplos
Ejemplo
Un <input> elemento con type="password" que debe contener 6 o más caracteres:
<form action="demo_form.asp">
Password: <input type="password" name="pw" pattern=".{6,}" title="Six or
more characters">
<input type="submit">
</form>
Inténtalo tú mismo " Ejemplo
Un <input> elemento con type="password" que debe contener 8 o más caracteres que son de por lo menos un número, y una mayúscula y minúscula:
<form action="demo_form.asp">
Password: <input
type="password" name="pw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain
at least one number and one uppercase and lowercase letter, and at least 8
or more characters">
<input type="submit">
</form>
Inténtalo tú mismo " Ejemplo
Un <input> elemento con type="email" que debe estar en el siguiente orden: caracteres @ caracteres. dominio (caracteres seguidos de un signo @, seguidos por más caracteres, y luego un "."
Después de que el "." firmar, sólo se puede escribir 2 a 3 letras de la A a la Z:
<form action="demo_form.asp">
E-mail: <input type="email"
name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$">
<input type="submit">
</form>
Inténtalo tú mismo " Ejemplo
Un <input> elemento con type="search" que no pueden contener los siguientes caracteres: ' o "
<form action="demo_form.asp">
Search: <input
type="search" name="search" pattern="[^'\x22]+" title="Invalid input">
<input type="submit">
</form>
Inténtalo tú mismo " Ejemplo
Un <input> elemento con type="url" que debe comenzar con http:// o https:// seguido por al menos un carácter:
<form action="demo_form.asp">
Homepage:
<input type="url" name="website" pattern="https?://.+" title="Include
http://">
<input type="submit">
</form>
Inténtalo tú mismo "