Exemplo
Um formulário HTML com um campo de entrada que pode conter apenas três letras (não há números ou caracteres especiais):
<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>
Tente você mesmo " Mais "Tente você mesmo" exemplos abaixo.
Definição e Uso
O pattern atributo especifica uma expressão regular que o <input> valor de elemento de é verificado contra.
Nota: O pattern atributo funciona com os seguintes tipos de entrada: text, date, search, url, tel, email e password .
Dica: Use o mundial title atributo para descrever o padrão para ajudar o usuário.
Sugestão: Saiba mais sobre expressões regulares em nosso tutorial JavaScript.
Suporte a navegadores
Os números na tabela especificar a primeira versão do browser que suporta totalmente o atributo.
| Atributo | |||||
|---|---|---|---|---|---|
| pattern | 5 | 10.0 | 4.0 | Não suportado | 9,6 |
Diferenças entre HTML 4.01 e HTML5
O pattern atributo é novo em HTML5.
Sintaxe
<input pattern="regexp">
Os valores dos atributos
| Valor | Descrição |
|---|---|
| regexp | Especifica uma expressão regular que o <input> valor de elemento de é verificado em relação |
mais Exemplos
Exemplo
Um <input> elemento com type="password" que deve conter 6 ou mais caracteres:
<form action="demo_form.asp">
Password: <input type="password" name="pw" pattern=".{6,}" title="Six or
more characters">
<input type="submit">
</form>
Tente você mesmo " Exemplo
Um <input> elemento com type="password" que deve conter 8 ou mais caracteres que são de pelo menos um número e uma maiúscula e letra 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>
Tente você mesmo " Exemplo
Um <input> elemento com type="email" , que deve ser na seguinte ordem: caracteres @ caracteres. domínio (caracteres, seguido por um sinal de @, seguido de mais caracteres, e, em seguida, um "."
Após o "." assinar, você só pode escrever 2 a 3 letras de A a 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>
Tente você mesmo " Exemplo
Um <input> elemento com type="search" que não podem conter os seguintes caracteres: ' ou "
<form action="demo_form.asp">
Search: <input
type="search" name="search" pattern="[^'\x22]+" title="Invalid input">
<input type="submit">
</form>
Tente você mesmo " Exemplo
Um <input> elemento com type="url" que deve começar com http:// ou https:// seguido por pelo menos um caractere:
<form action="demo_form.asp">
Homepage:
<input type="url" name="website" pattern="https?://.+" title="Include
http://">
<input type="submit">
</form>
Tente você mesmo "