Validação de formulário com JavaScript e Expressões Regulares
Autor: @edenfall | Publicado: 2007-10-24T08:48:00-02:00

Alguns dias atrás, na Lista PHP, li sobre validação de formulários usando JavaScript e me lembrei de como algumas vezes sofri na mão de alguns sites que abusavam na hora de aplicar a validação e que faziam a validação na hora que o usuário submetia o formulário. Não foi preciso ir muito longe. No site do CDHU tem um formulário que não funciona direito porque o desenvolvedor esqueceu de colocar o atributo id nos elementos do formulário. Aí usar document.getElementById() fica complicado em alguns navegadores. Abaixo descrevo dois motivos para tomar cuidado com validação no navegador:

Nem todos os navegadores suportam JavaScript, e existe uma possibilidade de o usuário ter desativado scripts no seu navegador. Um problema comum quando encontramos um formulário desses é que, depois de passar 5 minutos preenchendo dezenas de campos, ao clicar em &quot;Enviar&quot;, não acontece nada! Ou melhor, um erro pára o script e não deixa o formulário ser submetido.
Não é bom confiar em validação no cliente. É aconselhável sempre validar os dados no servidor, onde o desenvolvedor tem mais controle dos dados que estão sendo enviados pelo usuário.

Por outro lado, esperar o formulário ser enviado para no caso de erro ser carregada toda a página de novo não faz muito sentido ainda mais em tempos de WEB 2.0 onde tudo é &quot;rapidinho&quot;, bonitinho e usável. Uma saída, na minha opinião, é fazer a validação visualmente, enquanto o usuário digita os dados. A idéia foi tirada deste site quando eu estava lendo sobre Expressões Regulares no site do Aurélio.
Claro, a solução não é 100%, não é acessível (acredito que funcione apenas em navegadores compatíveis), mas em compensação não é intrusiva. Ela não impede o usuário de enviar os dados e, na maioria dos casos, saberá que está enviando os dados corretamente. Pelo menos os inputs de texto:
Antes de prosseguir, é recomendável que você tenha algum conhecimento sobre Expressões Regulares. Neste site do Aurélio você pode encontrar o guia que ele escreveu. Está em português, portanto não tem desculpa para não aprender. Nossa &quot;solução&quot; será baseada em ERs. Um bom entendimento de CSS também é requerido, mas não obrigatório.
Chega de bate-papo e vamos ao código JavaScript:
Só mais uma vez para fixar: a inspiração do código foi retirada daqui.
function validaInput ( obj , er )
{
    var background = { 'valido' : '#ccffcc' , 'invalido' : '#ffcccc' };
    var expressaoRegular = new RegExp( er );
    if ( expressaoRegular.test( obj.value ) )
        { obj.style.backgroundColor = background.valido; }
    else
        { obj.style.backgroundColor = background.invalido; }
}
Okay, vamos entender este código por partes:

Na primeira linha, criamos a função validaInput que recebe um objeto obj e uma string er como parâmetros. Veremos como utilizar isso mais tarde.
Na terceira linha, criamos um objeto background com as seguintes propriedades:

valido com o valor #ccffcc
invalido com o valor #ffcccc

Como deve ter percebido, ele contém as cores que serão aplicadas ao fundo do elemento input.

Na quarta linha, criamos uma Expressão Regular a qual iremos testar o parâmetro er da função.
As últimas linhas da função é o teste propriamente dito. A cada chamada da função, ela verifica o valor do elemento com a Expressão Regular e troca a cor de fundo do elemento.

Agora vamos ver a HTML, por exemplo vamos testar uma URL e um e-mail (ambas as ERs retiradas daqui):
&lt;script type="text/javascript"&gt;
&lt;!--
var modelo = { // Objeto contendo as expressões
    'erUrl' : '^(http[s]?://|ftp://)?(www\.)?[a-zA-Z0-9-\.]+\.(com|org|net|mil|edu|ca|co.uk|com.au|gov|br)$' ,
    'erEmail' : '^([0-9a-zA-Z]+([_.-]?[0-9a-zA-Z]+)*@[0-9a-zA-Z]+[0-9,a-z,A-Z,.,-]*(.){1}[a-zA-Z]{2,4})+$'
};
//--&gt;
&lt;/script&gt;
O código acima e a função que criamos devem estar no cabeçalho do HTML. Observe que criamos um objeto modelo para conter as nossas ERs. Esse objeto pode ser colocado diretamente na HTML, ou construído através de um script no servidor (PHP, ASP...). Por quê? Digamos que você quer manter a fidelidade das validações. É melhor ter as suas ERs guardadas num só lugar (um banco de dados, por exemplo) para serem recuperadas em qualquer ocasião, seja para validação no servidor ou para gerar a nossa HTML aqui em cima através de um gerenciador de templates. Assim, quando for alterar ou adicionar alguma expressão, só precisa fazer isso em um único lugar.
Função criada, objeto contendo as ERs criado, vamos à nossa HTML.
&lt;p&gt;
    &lt;label for="url"&gt;URL&lt;/label&gt;
    &lt;input
        type="text"
        name="url"
        id="url"
        onkeyup="validaInput(this,modelo.erUrl)"
        onblur="validaInput(this,modelo.erUrl)" /&gt;
&lt;/p&gt;
&lt;p&gt;
    &lt;label for="email"&gt;Email&lt;/label&gt;
    &lt;input
        type="text"
        name="email"
        id="email"
        onkeyup="validaInput(this,modelo.erEmail)"
        onblur="validaInput(this,modelo.erEmail)" /&gt;
&lt;/p&gt;
Aqui simplesmente criamos os elementos input e aplicamos os atributos/eventos onkeyup e onblur que são ativados a cada vez que o usuário digita um caractere no formulário ou muda de campo. Como vimos na criação da função, o primeiro parâmetro é um objeto, no caso o próprio campo do formulário, então usamos this. O segundo parâmetro é a nossa ER que está declarada lá no cabeçalho.
Agora é só testar. Você pode ver a solução online e estudar o código. Depois disso, crie suas próprias ERs e melhore o código. Espero que isto lhe seja útil!
Referências e páginas consultadas:

Portal brasileiro de Expressões Regulares
Testador de Expressão Regular
HTML Event Attributes - W3Schools