Expressões Regulares em Javascript

12/04, 2006 20:50 por Fellipe

Se precisamos validar campos de formulários via JavaScript, logo vamos ao Google, pesquisamos, e na primeira página de resultados achamos dezenas de soluções que já fazem isso com maestria. O pessoal realmente mata a pau, pois os scripts prontos são muito bem pensados.

Um dia, para infelicidade de um amigo meu, aquela página de resultados não bastou. Ele tinha em mãos um caso muito específico e não poderia achar em lugar algum uma solução que o deixasse satisfeito. Seu caso era único. Ele teria mesmo é que criar no braço uma regra de validação para um campo de formulário.

O caso não é muito complexo. O campo de formulário seria alimentado com o id de usuário que a empresa do meu amigo trabalha. Esse id tem a seguinte composição:

• começa com uma letra, que pode ser F ou P;
• contêm 2 números que identificam a área;
• contêm de 3 a 6 números que identificam o empregado, separado por hífen.

Exemplos: F20-199, F77-8765, P00-000000, P11-111.

E ele, meu amigo, pediu ajuda. Como eu conheço um pouquinho de expressões regulares, usá-las foi a primeira forma de solucionar o problema que me veio à mente. Aliás, minha forma de pensar divide-se em duas através dos tempos: Quando eu não sabia fazer expressão regular e agora que sei. Falo sério, são tantas aplicações e facilidades geradas através de regex que chego a achar que é simplesmente burrice trabalhar com codificação sem conhecer este recurso.

Para você não cair no meu conceito, rs, aprenda regex no site aurelio.net e compre o livro do autor, Aurélio Marinho Jargas. Dou nota com todos os dedos das mãos, pois o conteúdo digital e impresso são ótimos e idênticos, apesar de não termos que pagar pelo que está online. Isso sim que é ter fortaleza no próprio trabalho. Aposto que o Aurélio não deixa de vender por conta disso… pelo contrário.

…voltando ao problema

Não foi difícil achar um JavaScript que me desse espaço para eu fazer o que precisava. Agora, era só me basear nele e por a mão na massa.

Contudo, antes de sair codificando, precisei pensar em como seria minha expressão regular. Conclusão:

Por quê? Vamos ver passo a passo.

1. Bem, começamos com o caractere ^. Ele diz que a expressão a ser analisada (string) deve encontrar-se no começo da linha. Nada pode estar antes dela.
2. Quase da mesma forma que ^, o caractere $ significa o fim da linha. Ou seja, depois deste símbolo, a única coisa existente pode ser apenas uma quebra de linha.
3. Já que usamos ^ e $ na mesma expressão, pressupõe-se que nossa string ocupa uma linha inteira, ou então, um campo de formulário inteiro.
4. A instrução [PF] simboliza um grupo. Neste caso, o grupo é composto da letra P e F. A ordem não importa. O que eu quero dizer com isso é que posso aceitar apenas uma linha começando com a letra P ou F, e nenhuma mais.
5. Com {1} eu limito a quantidade de vezes que um membro do grupo pode aparecer. Como é uma unidade apenas, o uso é opcional, somente coloquei para ilustrar.
6. E eu crio um range de grupo com [0-9]. Ou seja, uma área, que pode ir de 0 até 9. O equivalente literal é [0123456789]. Dá pra fazer a mesma coisa com letras, usando [a-z]. Case sensitive, sempre.
7. Nem preciso explicar o {2}, né?
8. O hífen, neste caso é literal. Não há segredos quando a ele.
9. Mais um grupo [0-9].
10. E por fim, um range de limite de repetições com {3,6}. O que quer dizer que posso ter um mínimo de 3 e um máximo de 6 caracteres (numéricos, neste caso).

E desvendado o terrível segredo da temível expressão regular, posso construir a minha função em Javascript usando-a.

Aplicando no Javascript

Criei a seguinte função:

[code lang=”javascript”]
// Criamos um objeto chamado regra
var regra = new Object();
// e atribuimos valor à algumas propriedades deste objeto, neste caso, as regex
regra.id = /^[PF]{1}[0-9]{2}-[0-9]{3,6}$/i;
regra.tel = /^[0-9]{4}-[0-9]{4}$/i;
regra.cep = /^[0-9]{5}-[0-9]{3}$/i;

function validate(campo, tipo) {
// conforme o parâmetro tipo, selecionamos a propriedade do objeto em sel
var sel = regra[tipo];
// e finalmente, em ver, guardamos o resultado da validação feita pelo método exec() no valor do input em questão
var ver = sel.exec(campo.value);
// ver é false e tem dados no campo?
if(!ver && campo.value!=”"){
alert(’A identificação ‘+campo.value+’ não é válida.’);
return false;
}
return true;
}
// that’s all folks
[/code]

Através da chamada validate(campo do formulário, tipo de validação) no próprio evento onBlur de um campo de formulário, é possível verificar se o que foi digitado corresponde com as regras da minha regex .

Acredito que a função em si é auto-explicativa

Para fechar esse artigo, criei uma página que usa uma função parecida com essa e permite que possamos testar nossas próprias expressões regulares. Crie as suas e teste-as lá. Ou, caso use Firefox, baixe uma excelente extensão que também valida suas regex, o Regular Expression Tester.

Agora você está quase apto a entender códigos-fonte de Perl, hehehe.

Este artigo foi publicado Wednesday, 12 de April de 2006 às 20:50 e foi categorizado como Cookbook, DOM Lab. Você pode acompanhar os comentários deste post assinando o comment RSS (RSS 2.0 [?]). Você também pode comentar ou atrelar um trackback [?] daqui no seu site.