domingo, 18 de janeiro de 2015

HTML5 - Validando formato de CPF (pattern)

Olá pessoal, nesse post vamos fazer uma validação do formato do CPF utilizando expressões regulares. O HTML5 suporta ER diretamente no campo usando o atributo pattern.

Veja o código abaixo de um formulário bem simples:


Veja só, conseguimos (utilizando o atributo pattern) validar o formato de CPF sem utilizar JavaScript.

O que acontece é que o navegador verifica se o texto digitado casa com a ER.

Você pode acessar uma chave que indica se a ER do atributo pattern não casou, ela é ligada quando isso acontece. Você poderá acessar fazendo:

"document.cadastro.cpf.validity.patternMismatch"

Você poderia também acrescentar ao "input" o atributo "oninvalid" indicando uma função do seu script que será chamada caso não case com a ER do atributo pattern.

Quanto a ER (linha 10), ela é muito simples. Com d{3} indicamos a quantidade de dígitos que deve ter, nesse caso são 3 dígitos. d{2} indica que deve possuir 2 dígitos.

Veja como fica o formulário:

Digite seu CPF:



Nenhum comentário: