Atributo pattern

O atributo pattern define a validação de um campo de entrada de formulário HTML por expressão regular.

Expressões regulares são comandos especiais que permitem criar praticamente quaisquer regras de validação. Você pode conhecê-las melhor no livro de expressões regulares PHP ou no livro de expressões regulares JavaScript.

Ao tentar enviar o formulário, caso o campo com este atributo não esteja preenchido - o navegador não permitirá o envio do formulário e exibirá um erro na forma de uma dica pop-up. Infelizmente, o texto do erro e sua aparência não podem ser alterados usando HTML ou CSS.

Tenha em mente que a presença do atributo pattern não o isenta de verificar a correção do preenchimento do formulário no lado do servidor com PHP (pois a proteção através do atributo pode ser facilmente contornada).

O atributo pattern deve ser aplicado às tags input ou textarea.

Exemplo

Vamos nos voltar para a tag input e adicionar o atributo pattern, no qual inseriremos uma expressão regular que verifica se foi inserido no input um número de dois dígitos (por exemplo, 25).

Digite qualquer número e tente clicar no botão para enviar o formulário. Se um número que não seja de dois dígitos for inserido, o navegador não permitirá o envio do formulário e exibirá uma mensagem de erro, caso contrário, o formulário será enviado:

<form action="">
	<input type="text" pattern="\d{2}">
	<input type="submit">
</form>

Exemplo . Campo vazio

No exemplo anterior, o navegador exibia um erro apenas caso o campo não estivesse vazio (embora um campo vazio não seja um número com dois dígitos). Vamos tentar fazer com que o erro seja exibido também para o campo vazio - junto com o atributo pattern escreveremos também o atributo required:

<form action="">
	<input type="text" pattern="\d{2}" required>
	<input type="submit">
</form>

Veja também

atributo required,
com o qual é possível fazer a verificação de campo obrigatório