Atributo pattern do <input> HTML

Tag HTML <input>

Definição e uso

padrão O atributo define a expressão regular, verificando o valor do elemento <input> com base na expressão regular no momento do envio do formulário.

Anotação:padrão O atributo se aplica aos seguintes tipos de entrada:

  • text
  • date
  • search
  • url
  • tel
  • email
  • password

Dica:Usando Atributo global title para descrever o padrão, ajudando o usuário a entender.

Dica:Por favor, no nosso Tutorial de JavaScript Aprenda mais sobre expressões regulares no nosso

Exemplo

Exemplo 1

A seguir está um formulário HTML contendo um campo de entrada que pode conter apenas três letras (não pode conter números ou caracteres especiais):

<form action="/action_page.php">
  <label for="country_code">Código do país:</label>
  <input type="text" id="country_code" name="country_code"
  pattern="[A-Za-z]{3}" title="Código de país de três letras"><br><br>
  <input type="submit">
</form>

Experimente você mesmo

Exemplo 2

Aqui está um elemento <input> com o atributo type "password", que deve conter pelo menos 8 caracteres:

<form action="/action_page.php">
  <label for="pwd">Senha:</label>
  <input type="password" id="pwd" name="pwd"
  pattern=".{8,}" title="Oito ou mais caracteres">
  <input type="submit">
</form>

Experimente você mesmo

Exemplo 3

Aqui está um elemento <input> com o atributo type "password", que deve conter 8 ou mais caracteres, incluindo pelo menos um número, uma letra maiúscula e uma letra minúscula:

<form action="/action_page.php">
  <label for="pwd">Senha:</label>
  <input type="password" id="pwd" name="pwd"
  pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
  title="Deve conter pelo menos oito caracteres, incluindo um número, uma letra maiúscula e uma letra minúscula">
  <input type="submit">
</form>

Experimente você mesmo

Exemplo 4

Aqui está um elemento <input> com o atributo type "email", que deve seguir a seguinte ordem: characters@characters.domain.

Composta por caracteres e o símbolo @, seguido por mais caracteres, e em seguida, um símbolo ".". Após o símbolo ".", adicione pelo menos duas letras da a à z:

<form action="/action_page.php">
  <label for="email">E-mail:</label>
  <input type="email" id="email" name="email"
  pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
  <input type="submit">
</form>

Experimente você mesmo

Exemplo 5

Aqui está um elemento <input> com o atributo type "search", que não pode conter os seguintes caracteres: ' ou " .

<form action="/action_page.php">
  <label for="search">Pesquisa:</label>
  <input type="search" id="search" name="search"
  pattern="[^'\x22]+" title="entrada inválida">
  <input type="submit">
</form>

Experimente você mesmo

Exemplo 6

Aqui está um elemento <input> com o atributo type "url", que deve começar com http:// ou https://, seguido por pelo menos um caractere:

<form action="/action_page.php">
  <label for="website">Página inicial:</label>
  <input type="url" id="website" name="website"
  pattern="https?://.+" title="Contém http://">
  <input type="submit">
</form>

Experimente você mesmo

Sintaxe

<input pattern="regexp">

Valor do atributo

Valor Descrição
regexp Define a expressão regular para verificar o valor do elemento <input>.

Suporte do navegador

Os números na tabela indicam a versão do navegador que suportou completamente essa propriedade pela primeira vez.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
5.0 10.0 4.0 10.1 9.6

Notas:padrão O atributo é uma nova propriedade do HTML5.

Tag HTML <input>