Olá pessoal
Quem nunca viu para ai nas páginas na internet esse validadores de campos, pois bem nesse artigo vou mostra como validar 14 tipo de campos diferentes através de expressões regulares utilizando Javascript, primeiramente é necessário as variáveis com as expressões regulares conforme abaixo, no final de cada expressão regular tem um comentário sobre a expressão, e ainda o nome da variável é vem sugestivo, por exemplo a variável email é a expressão regular de email. Um ultimo detalhe expressões regular não validam exatamente o valor mas sim o padrão do valor infonado.
var email = /^.+@.+\..{2,3}$/;//expressão regular que valida email
var inteiro = /^[\-\+]?\d*$/;//expressão regular que valida inteiro
var url = /^(([\w]+:)?\/\/)?(([\d\w]|%[a-fA-f\d]{2,2})+(:([\d\w]|%[a-fA-f\d]{2,2})+)?@)?([\d\w][-\d\w]{0,253}[\d\w]\.)+[\w]{2,4}(:[\d]+)?(\/([-+_~.\d\w]|%[a-fA-f\d]{2,2})*)*(\?(&?([-+_~.\d\w]|%[a-fA-f\d]{2,2})=?)*)?(#([-+_~.\d\w]|%[a-fA-f\d]{2,2})*)?$/;//expressão regular que valida url
var data = /^(([0-2]\d|[3][0-1])\/([0]\d|[1][0-2])\/[1-2][0-9]\d{2})$/;//expressão regular que valida data no formato dd/mm/yyyy
var decimal = /^[+-]?((\d+|\d{1,3}(\.\d{3})+)(\,\d*)?|\,\d+)$/;//expressão regular que valida decimal
var ALL = /^[3-6]{1}[0-9]{12,15}$/;//expressão regular que valida todos os catões de crédito
var VISA = /^4[0-9]{12,15}$/;//expressão regular que valida cartão de crédito VISA
var MASTERCARD = /^5[1-5]{1}[0-9]{14}$/;//expressão regular que valida cartão de crédito MASTERCERD
var AMEX = /^3(4|7){1}[0-9]{13}$/;//expressão regular que valida cartão de crédito AMEX
var DISCOVER = /^6011[0-9]{12}$/; //expressão regular que valida cartão de crédito DISCOVER
var DINERSCLUB = /^3((0[0-5]{1}[0-9]{11})|(6[0-9]{12})|(8[0-9]{12}))$/;//expressão regular que valida cartão de crédito DINERCLUB
var cep = /^\d{5}([\-]\d{3})?$/;//expressão regular que valida CEP
var hora = /^\d{1,2}[:]\d{2}([:]\d{2})?$/;//expressão regular que valida hora no seguinte formato hh:mm:ss
var fone = /^\d{1}[(]\d{2}([)]\d{4}[-]\d{4})?$/;//expressão regular que valida fone no seguinte formato 0(xx)0000-0000
Declarado as variáveis com as expressões regulares, vamos criar duas funções, uma para validar Data e outra para validar hora, primeiro vamos implementar a função de validar hora, conforme o bloco de código abaixo:
function ValidarHora(valor) //função de validação de hora
{
if (!hora.test(valor))
{ return false; }
var values = valor.split(":");//divide a hora em tres parte semaprando pelos :
if ( (parseFloat(values[0]) <> 23) )//valida se a faixa de hora é valida
{
alert("Hora Inválida");
return false;
}
if ( (parseFloat(values[1]) <> 59) )//valida se a faixa de minutos é valida
{
alert("Minutos inválidos");
return false;
}
if (values.length > 2)
{
if ( (parseFloat(values[2]) <> 59) )//valida se a faixa de segundos é valida
{
alert("Segundos Inválidos");
return false;
}
}
return true;
}
Agora vamos implementar a função de validar data conforme o bloco de código abaixo:
function ValidarData(valor)//função de validação de data
{
var values = valor.split("/");//divide a data em tres parte semaprando pela /
var dia = parseFloat(values[0]);//preenche as variaveis dia
var mes = parseFloat(values[1]);//preenche as variaveis mes
var ano = parseFloat(values[2]);//preenche as variaveis ano
if( ((mes==04) || (mes==06) || (mes==09) || (mes==11)) && (dia > 30))//valida o numero maximos dos mes 04 06 09 11 estão com masi de 30 dias
{
alert("Dia incorreto!!! O mês especificado contém no máximo 30 dias.");
campo.focus();
campo.select();
return false;
} else
{
if((ano%4!=0) && (mes==02) && (dia>28))//validação do mes de fevereiro, se o ano for diferente de bixeto tem no máximo 28 dias
{
alert("Data incorreta!! O mês especificado contém no máximo 28 dias.");
return false;
} else
{
if((ano%4==0) && (mes==02) && (dia>29))//se o ano for bixesto pode ter 29 dias
{
alert("Data incorreta!! O mês especificado contém no máximo 29 dias.");
return false;
}
}
}
return true;
}
Criadas a funções da validação de data e hora vamos cria a a função Validar, a qual devera receber por parametro o campo a ser validado e o tipo de validação. A através de um switch case será feita a validação da seguinte maneira:
case "email":
{
if(!email.test(campo.value))//é feito o teste se o valor do campo esta dentro do padrão da expressão regular
{
alert(msgErro);//se não estiver apresenta a msg de erro
campo.className="textfield3";//altera a estilo do campo, para a cor de fundo meio avermelhada
campo.focus();//joga o foco para o campo
campo.select();//seleciona o valor do campo
} else
{
campo.className="textfield2";//se o valor estiver nos padrões da expressão regular apenas altera =o estilo do campo para uma cor de fundo verde
}
break;
}
Se o tipo passado for email, será feito mo teste da expressão regular da seguinte maneira
if(!email.test(campo.value))//a função retorna true ou false, se false entra no if e dá um alert, muda o estilo do campo e joga o foco par o campo.
A função validar toda deve ser conforme o bloco de código abaixo
function Validar(campo, tipo)//Função a qual se deve passar o campo a ser validado e o tipo de validador
{
if(campo.value != '')//apenas valida se o campo for diferente de vazio
{
switch (tipo) //switch case para fazer a validação conforme o tipo passado por parametro para a função
{
case "email":
{
if(!email.test(campo.value))//é feito o teste se o valor do campo esta dentro do padrão da expressão regular
{
alert(msgErro);//se não estiver apresenta a msg de erro
campo.className="textfield3";//altera a estilo do campo, para a cor de fundo meio avermelhada
campo.focus();//joga o foco para o campo
campo.select();//seleciona o valor do campo
} else
{
campo.className="textfield2";//se o valor estiver nos padrões da expressão regular apenas altera =o estilo do campo para uma cor de fundo verde
}
break;
}
case "fone":
{
if(!fone.test(campo.value))
{
alert(msgErro);
campo.className="textfield3";
campo.focus();
campo.select();
} else
{
campo.className="textfield2";
}
break;
}
case "creditcar":
{
if(DINERSCLUB.test(campo.value))
{
campo.className="textfield2";
return true;
}
else
if(DISCOVER.test(campo.value))
{
campo.className="textfield2";
return true;
}
else
if(AMEX.test(campo.value))
{
campo.className="textfield2";
return true;
}
else
if(MASTERCARD.test(campo.value))
{
campo.className="textfield2";
return true;
}
else
if(VISA.test(campo.value))
{
campo.className="textfield2";
return true;
}
else
if(ALL.test(campo.value))
{
campo.className="textfield2";
return true;
}
else
{
alert(msgErro);
campo.className="textfield3";
campo.focus();
campo.select();
}
break;
}
case "cep":
{
if(!cep.test(campo.value))
{
alert(msgErro);
campo.className="textfield3";
campo.focus();
campo.select();
}else
{
campo.className="textfield2";
}
break;
}
case "inteiro":
{
if(!inteiro.test(campo.value))
{
alert(msgErro);
campo.className="textfield3";
campo.focus();
campo.select();
}else
{
campo.className="textfield2";
}
break;
}
case "url":
{
if(!url.test(campo.value))
{
alert(msgErro);
campo.className="textfield3";
campo.focus();
campo.select();
}else
{
campo.className="textfield2";
}
break;
}
case "data":
{
if(!data.test(campo.value))
{
alert(msgErro);
campo.className="textfield3";
campo.focus();
campo.select();
}
else
{//se o campo data passar pela expressão regular então a chamada a função que valida a data
if(!ValidarData(campo.value))
{
campo.className="textfield3";
campo.focus();
campo.select();
}else
{
campo.className="textfield2";
}
}
break;
}
case "decimal":
{
if(!decimal.test(campo.value))
{
alert(msgErro);
campo.className="textfield3";
campo.focus();
campo.select();
}else
{
campo.className="textfield2";
}
break;
}
case "time":
{//se o campo time passar pela expressão regular então a chamada a função que valida a hora
if(hora.test(campo.value))
{
if(!ValidarHora(campo.value))
{
campo.className="textfield3";
campo.focus();
campo.select();
}else
{
campo.className="textfield2";
}
}
else
{
campo.className="textfield3";
alert(msgErro);
campo.focus();
campo.select();
}
break;
}
}
}
}
Agora vamos criar o corpo da página conforme o bloco de código abaixo
Validadores
Data :<##input id="data" class="textfield" type="text" onblur="Validar(this, 'data')">dd/mm/yyyy
Email :<##input id="Email" class="textfield" type="text" onblur="Validar(this, 'email')">
Fone :<##input id="Fone" class="textfield" type="text" onblur="Validar(this, 'fone')">0(xx)0000-0000
URL :<##input id="URL" class="textfield" type="text" onblur="Validar(this, 'url')">
Decimal :<##input id="Decimal" class="textfield" type="text" onblur="Validar(this, 'decimal')">
Inteiro :<##input id="Inteiro" class="textfield" type="text" onblur="Validar(this, 'inteiro')">
Hora :<##input id="Hora" class="textfield" type="text" onblur="Validar(this, 'time')">hh:mm:ss
CEP :<##input id="CEP" class="textfield" type="text" onblur="Validar(this, 'cep')">00000-0000
CREDIT-CAR :<##input id="creditcar" class="textfield" type="text" onblur="Validar(this, 'creditcar')">
A função de Validar é chamada no onblur do campo, que é o evento de saída do campo, ainda deve se adicionar no cabeçalho da página os seguintes estilos
<##style>
body{
font-family:Arial;
font-size:12px;
color:#0000;
background-color:#FFFFFF;
margin-bottom:0px;
margin-left:2px;
margin-right:0px;
margin-top:2px;
}
.textfield{
BACKGROUND-COLOR:#ffffff;
}
.textfield2{
BACKGROUND-COLOR:#B8F5B1;
}
.textfield3{
BACKGROUND-COLOR:#FF9F9F;
}
.H1{
font-size:21px;
font-family:Arial;
<##/style>
Muito bem pessoal este foi um simples exemplo de validadores de campos com expressões regulares em Javascript, leve e fácil de implementar em suas paginas, para ser mais prático basta criar um arquivo *.js e apenas fazer a chamada deste arquivo no head de suas páginas, caso queira receber o exemplo completo deixei um comentário com seu email.
Forte abraço e até a próxima.
Quem nunca viu para ai nas páginas na internet esse validadores de campos, pois bem nesse artigo vou mostra como validar 14 tipo de campos diferentes através de expressões regulares utilizando Javascript, primeiramente é necessário as variáveis com as expressões regulares conforme abaixo, no final de cada expressão regular tem um comentário sobre a expressão, e ainda o nome da variável é vem sugestivo, por exemplo a variável email é a expressão regular de email. Um ultimo detalhe expressões regular não validam exatamente o valor mas sim o padrão do valor infonado.
var email = /^.+@.+\..{2,3}$/;//expressão regular que valida email
var inteiro = /^[\-\+]?\d*$/;//expressão regular que valida inteiro
var url = /^(([\w]+:)?\/\/)?(([\d\w]|%[a-fA-f\d]{2,2})+(:([\d\w]|%[a-fA-f\d]{2,2})+)?@)?([\d\w][-\d\w]{0,253}[\d\w]\.)+[\w]{2,4}(:[\d]+)?(\/([-+_~.\d\w]|%[a-fA-f\d]{2,2})*)*(\?(&?([-+_~.\d\w]|%[a-fA-f\d]{2,2})=?)*)?(#([-+_~.\d\w]|%[a-fA-f\d]{2,2})*)?$/;//expressão regular que valida url
var data = /^(([0-2]\d|[3][0-1])\/([0]\d|[1][0-2])\/[1-2][0-9]\d{2})$/;//expressão regular que valida data no formato dd/mm/yyyy
var decimal = /^[+-]?((\d+|\d{1,3}(\.\d{3})+)(\,\d*)?|\,\d+)$/;//expressão regular que valida decimal
var ALL = /^[3-6]{1}[0-9]{12,15}$/;//expressão regular que valida todos os catões de crédito
var VISA = /^4[0-9]{12,15}$/;//expressão regular que valida cartão de crédito VISA
var MASTERCARD = /^5[1-5]{1}[0-9]{14}$/;//expressão regular que valida cartão de crédito MASTERCERD
var AMEX = /^3(4|7){1}[0-9]{13}$/;//expressão regular que valida cartão de crédito AMEX
var DISCOVER = /^6011[0-9]{12}$/; //expressão regular que valida cartão de crédito DISCOVER
var DINERSCLUB = /^3((0[0-5]{1}[0-9]{11})|(6[0-9]{12})|(8[0-9]{12}))$/;//expressão regular que valida cartão de crédito DINERCLUB
var cep = /^\d{5}([\-]\d{3})?$/;//expressão regular que valida CEP
var hora = /^\d{1,2}[:]\d{2}([:]\d{2})?$/;//expressão regular que valida hora no seguinte formato hh:mm:ss
var fone = /^\d{1}[(]\d{2}([)]\d{4}[-]\d{4})?$/;//expressão regular que valida fone no seguinte formato 0(xx)0000-0000
Declarado as variáveis com as expressões regulares, vamos criar duas funções, uma para validar Data e outra para validar hora, primeiro vamos implementar a função de validar hora, conforme o bloco de código abaixo:
function ValidarHora(valor) //função de validação de hora
{
if (!hora.test(valor))
{ return false; }
var values = valor.split(":");//divide a hora em tres parte semaprando pelos :
if ( (parseFloat(values[0]) <> 23) )//valida se a faixa de hora é valida
{
alert("Hora Inválida");
return false;
}
if ( (parseFloat(values[1]) <> 59) )//valida se a faixa de minutos é valida
{
alert("Minutos inválidos");
return false;
}
if (values.length > 2)
{
if ( (parseFloat(values[2]) <> 59) )//valida se a faixa de segundos é valida
{
alert("Segundos Inválidos");
return false;
}
}
return true;
}
Agora vamos implementar a função de validar data conforme o bloco de código abaixo:
function ValidarData(valor)//função de validação de data
{
var values = valor.split("/");//divide a data em tres parte semaprando pela /
var dia = parseFloat(values[0]);//preenche as variaveis dia
var mes = parseFloat(values[1]);//preenche as variaveis mes
var ano = parseFloat(values[2]);//preenche as variaveis ano
if( ((mes==04) || (mes==06) || (mes==09) || (mes==11)) && (dia > 30))//valida o numero maximos dos mes 04 06 09 11 estão com masi de 30 dias
{
alert("Dia incorreto!!! O mês especificado contém no máximo 30 dias.");
campo.focus();
campo.select();
return false;
} else
{
if((ano%4!=0) && (mes==02) && (dia>28))//validação do mes de fevereiro, se o ano for diferente de bixeto tem no máximo 28 dias
{
alert("Data incorreta!! O mês especificado contém no máximo 28 dias.");
return false;
} else
{
if((ano%4==0) && (mes==02) && (dia>29))//se o ano for bixesto pode ter 29 dias
{
alert("Data incorreta!! O mês especificado contém no máximo 29 dias.");
return false;
}
}
}
return true;
}
Criadas a funções da validação de data e hora vamos cria a a função Validar, a qual devera receber por parametro o campo a ser validado e o tipo de validação. A através de um switch case será feita a validação da seguinte maneira:
case "email":
{
if(!email.test(campo.value))//é feito o teste se o valor do campo esta dentro do padrão da expressão regular
{
alert(msgErro);//se não estiver apresenta a msg de erro
campo.className="textfield3";//altera a estilo do campo, para a cor de fundo meio avermelhada
campo.focus();//joga o foco para o campo
campo.select();//seleciona o valor do campo
} else
{
campo.className="textfield2";//se o valor estiver nos padrões da expressão regular apenas altera =o estilo do campo para uma cor de fundo verde
}
break;
}
Se o tipo passado for email, será feito mo teste da expressão regular da seguinte maneira
if(!email.test(campo.value))//a função retorna true ou false, se false entra no if e dá um alert, muda o estilo do campo e joga o foco par o campo.
A função validar toda deve ser conforme o bloco de código abaixo
function Validar(campo, tipo)//Função a qual se deve passar o campo a ser validado e o tipo de validador
{
if(campo.value != '')//apenas valida se o campo for diferente de vazio
{
switch (tipo) //switch case para fazer a validação conforme o tipo passado por parametro para a função
{
case "email":
{
if(!email.test(campo.value))//é feito o teste se o valor do campo esta dentro do padrão da expressão regular
{
alert(msgErro);//se não estiver apresenta a msg de erro
campo.className="textfield3";//altera a estilo do campo, para a cor de fundo meio avermelhada
campo.focus();//joga o foco para o campo
campo.select();//seleciona o valor do campo
} else
{
campo.className="textfield2";//se o valor estiver nos padrões da expressão regular apenas altera =o estilo do campo para uma cor de fundo verde
}
break;
}
case "fone":
{
if(!fone.test(campo.value))
{
alert(msgErro);
campo.className="textfield3";
campo.focus();
campo.select();
} else
{
campo.className="textfield2";
}
break;
}
case "creditcar":
{
if(DINERSCLUB.test(campo.value))
{
campo.className="textfield2";
return true;
}
else
if(DISCOVER.test(campo.value))
{
campo.className="textfield2";
return true;
}
else
if(AMEX.test(campo.value))
{
campo.className="textfield2";
return true;
}
else
if(MASTERCARD.test(campo.value))
{
campo.className="textfield2";
return true;
}
else
if(VISA.test(campo.value))
{
campo.className="textfield2";
return true;
}
else
if(ALL.test(campo.value))
{
campo.className="textfield2";
return true;
}
else
{
alert(msgErro);
campo.className="textfield3";
campo.focus();
campo.select();
}
break;
}
case "cep":
{
if(!cep.test(campo.value))
{
alert(msgErro);
campo.className="textfield3";
campo.focus();
campo.select();
}else
{
campo.className="textfield2";
}
break;
}
case "inteiro":
{
if(!inteiro.test(campo.value))
{
alert(msgErro);
campo.className="textfield3";
campo.focus();
campo.select();
}else
{
campo.className="textfield2";
}
break;
}
case "url":
{
if(!url.test(campo.value))
{
alert(msgErro);
campo.className="textfield3";
campo.focus();
campo.select();
}else
{
campo.className="textfield2";
}
break;
}
case "data":
{
if(!data.test(campo.value))
{
alert(msgErro);
campo.className="textfield3";
campo.focus();
campo.select();
}
else
{//se o campo data passar pela expressão regular então a chamada a função que valida a data
if(!ValidarData(campo.value))
{
campo.className="textfield3";
campo.focus();
campo.select();
}else
{
campo.className="textfield2";
}
}
break;
}
case "decimal":
{
if(!decimal.test(campo.value))
{
alert(msgErro);
campo.className="textfield3";
campo.focus();
campo.select();
}else
{
campo.className="textfield2";
}
break;
}
case "time":
{//se o campo time passar pela expressão regular então a chamada a função que valida a hora
if(hora.test(campo.value))
{
if(!ValidarHora(campo.value))
{
campo.className="textfield3";
campo.focus();
campo.select();
}else
{
campo.className="textfield2";
}
}
else
{
campo.className="textfield3";
alert(msgErro);
campo.focus();
campo.select();
}
break;
}
}
}
}
Agora vamos criar o corpo da página conforme o bloco de código abaixo
Validadores
Data :<##input id="data" class="textfield" type="text" onblur="Validar(this, 'data')">dd/mm/yyyy
Email :<##input id="Email" class="textfield" type="text" onblur="Validar(this, 'email')">
Fone :<##input id="Fone" class="textfield" type="text" onblur="Validar(this, 'fone')">0(xx)0000-0000
URL :<##input id="URL" class="textfield" type="text" onblur="Validar(this, 'url')">
Decimal :<##input id="Decimal" class="textfield" type="text" onblur="Validar(this, 'decimal')">
Inteiro :<##input id="Inteiro" class="textfield" type="text" onblur="Validar(this, 'inteiro')">
Hora :<##input id="Hora" class="textfield" type="text" onblur="Validar(this, 'time')">hh:mm:ss
CEP :<##input id="CEP" class="textfield" type="text" onblur="Validar(this, 'cep')">00000-0000
CREDIT-CAR :<##input id="creditcar" class="textfield" type="text" onblur="Validar(this, 'creditcar')">
A função de Validar é chamada no onblur do campo, que é o evento de saída do campo, ainda deve se adicionar no cabeçalho da página os seguintes estilos
<##style>
body{
font-family:Arial;
font-size:12px;
color:#0000;
background-color:#FFFFFF;
margin-bottom:0px;
margin-left:2px;
margin-right:0px;
margin-top:2px;
}
.textfield{
BACKGROUND-COLOR:#ffffff;
}
.textfield2{
BACKGROUND-COLOR:#B8F5B1;
}
.textfield3{
BACKGROUND-COLOR:#FF9F9F;
}
.H1{
font-size:21px;
font-family:Arial;
<##/style>
Muito bem pessoal este foi um simples exemplo de validadores de campos com expressões regulares em Javascript, leve e fácil de implementar em suas paginas, para ser mais prático basta criar um arquivo *.js e apenas fazer a chamada deste arquivo no head de suas páginas, caso queira receber o exemplo completo deixei um comentário com seu email.
Forte abraço e até a próxima.
Comentários