Este tópico realmente nos
permitirá escrever expressões regulares mais úteis.
É através de padrões de repetições
que conseguiremos validar entradas do usuários tais como
CPF, CEP e outros valores que obedecem a um determinado padrão.
Dê uma boa olhada na tabela a seguir e vamos escrever
alguns exemplos:
| Símbolo |
Descrição |
Exemplo |
| {x} |
Encontra exatamente x ocorrências
de um padrão. |
/\d{5}/ encontra 5 dígitos. |
| {x,} |
Encontra x ou mais ocorrências de um
padrão.
|
/\s{2,}/ encontra no mínimo 2 caracteres
de espaço. |
| {x,y} |
Encontra de x até y ocorrências
de um padrão.
|
/\d{2,4}/ encontra no mínimo 2 mas
não mais que 4 dígitos. |
| ? |
Encontra zero ou uma ocorrência. Equivale à
{0,1}. |
/a\s?b/ encontra "ab" ou "a b".
|
| * |
Encontra zero ou mais ocorrências. Equivale à
{0,}. |
/we*/ encontra "w" em "why" e "wee"
em "between", mas não encontra em "bad".
|
| + |
Encontra uma ou mais ocorrências. Equivale à
{1,}. |
/fe+d/ encontra tanto "fed" quanto "feed" |
Sabemos que o símbolo {x} indica que o padrão
pesquisado deve ter exatamente x ocorrências da expressão
que o precede. Sendo assim, vamos escrever um código
para validar o padrão de CEP brasileiro.
Durante a autoria deste tutorial, o padrão de CEP brasileiro
é 00.000-000, ou seja, um CEP de uma cidade qualquer
poderia ser 43.534-300. É claro que até o final
da leitura deste texto você estará apto a oferecer
alternativas de validação de CEPs.
Bem, então sabemos que, para que o padrão de CEP
que analisamos acima seja válido, a string deverá
conter 2 digitos, 1 ponto, 3 digitos, 1 hifen e mais 3 digitos.
Veja o trecho de código que mostra como esta validação
pode ser feita:
<script type="text/JavaScript"
language="JavaScript">
var pesquisa = /^\d{2}.\d{3}-\d{3}$/;
var CEP = "43.653-938";
if(CEP.match(pesquisa))
alert("Este CEP é válido");
else
alert("Este CEP não é
válido");
</script>
Observe a expressão regular novamente: var
pesquisa = /^\d{2}.\d{3}-\d{3}$/;
Ficou com medo? Clique aqui e recomece
a leitura do tutorial. Se você resolveu não
clicar e continuar nós vamos analisar esta expressão
passo a passo. Comece analisando o símbolo ^ no inicio
do padrão e o símbolo $ no final do padrão.
Estes símbolos servem para forçar a pesquisa do
padrão no inicio e fim da string. Se não o usássemos
aqui o código não funcionaria como esperado.
O restante da expressão é fácil. O trecho
"\d{2}" indica que um digito de 0 a 9 deverá
aparecer duas vezes. Em seguida temos a ocorrência de
um ponto. O trecho "\d{3}" indica a ocorrência
de três digitos de 0 a 9. Em seguida temos a ocorrência
do hífen e finalmente mais três dígitos
de 0 a 9. Fácil, não?
Para praticar um pouco mais, veja como é fácil
escrever uma expressão regular que verifica se uma string
contém um padrão de CPF válido. Veja o
código:
<script type="text/JavaScript"
language="JavaScript">
var pesquisa = /^\d{3}.?\d{3}.?\d{3}-?\d{2}$/;
var CPF = "334.355.243-32";
if(CPF.match(pesquisa))
alert("Este CPF parece ser válido");
else
alert("Este CPF não é
válido");
</script>
Este trecho de código não verifica se o CPF é
válido, apenas se o número fornecido obedece aos
padrões de um número de CPF. Mas, espere! O que
significa estes pontos de interrogação logo após
os pontos e o hífen? Ora, sabemos que muitas pessoas
preferem digitar o CPF sem os pontos e o hífen. Como
a tabela anterior nos informa que o símbolo "?"
é indicado para marcar uma ou nenhuma ocorrência
do símbolo que o precede, nosso código consegue
validar números de CPF nos formatos 432.643.943-54 ou
simplesmente 43264394354.
E agora, vamos aprender a validar um endereço de e-mail?
Sabemos que um endereço de e-mail pode conter, antes
do @, uma quantidade ilimitada de letras, dígitos, pontos,
hífens ou sublinhados (underline). Caracteres especiais
não são permitidos. Existe, no entanto, uma restrição:
é preciso que algo apareça antes do @. Olhando
a tabela anterior verificamos que o símbolo + é
usado para exigir no mínimo uma ocorrência do padrão
especificado entre os colchetes e pode conter uma quantidade
ilimitada desta ocorrência. Assim, comece analisando a
parte da expressão antes do @: var
padrao = /^[a-zA-Z0-9._-]+@([a-zA-Z0-9.-]+\.)+[a-zA-Z0-9.-]{2,}$/;
Logo depois do @ nós sabemos que temos que ter o nome
do domínio (algo como recomende.com). Mas, não
há restrições na quantidade de pontos separando
as partes do domínio. A única restrição
é que no mínimo um ponto deverá ser encontrado.
Vamos começar analisando o trecho: ([a-zA-Z0-9.-]+\.)+
Aqui o símbolo + dentro dos parênteses indica que
poderemos ter uma ou mais ocorrências do padrão
[a-zA-Z0-9.-]. Veja que o caractere de sublinhado não
é permitido no nome de domínio. O símbolo
"\." indica que logo após a(s) ocorrência(s)
do padrão dentro dos colchetes um ponto deverá
ser encontrado. Observe agora o símbolo + fora dos parênteses.
Este símbolo nos informa que uma ou mais ocorrências
do padrão dentro dos parênteses deverá ocorrer
para que o endereço de e-mail seja válido.
Observe agora a parte final da expressão: [a-zA-Z0-9.-]{2,}$
O símbolo $ indica que o endereço de e-mail deverá
conter no mínimo duas ocorrências do padrão
[a-zA-Z0-9.-]. Para finalizar dê uma olhada no código
completo para o exemplo:
<script type="text/JavaScript"
language="JavaScript">
var padrao = /^[a-zA-Z0-9._-]+@([a-zA-Z0-9.-]+\.)+[a-zA-Z0-9.-]{2,}$/;
var mail = "suporte@recomende.com";
if(mail.match(padrao))
alert("Este endereço de
e-mail é válido");
else
alert("Este endereço de
e-mail NÃO é válido");
</script>
Você realmente conseguiu entender esta expressão
regular? Se a resposta for afirmativa você está
pronto para continuar. Do contrario recomendo que clique
aqui e recomece a leitura deste tutorial. |