Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Para quem está cansado de procurar e sempre achar as coisas mais louca do mundo para validação de campo,
ta ai uma solução pratica e viável com JavaScript.
Validação de CPF+CNPJ+CEP+DATA+TELEFONE
OBS: CPF e CNPJ o valores são validados segundo as regras estabelecidas para tal fim.
Espero que seja de útil!
Inte+
Oliveira Junior
Index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>Formatacao de campos</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><script language="JavaScript" type="text/javascript" src="MascaraValidacao.js"></script> </head><body><form name="form1"><br><br>CEP:<input type="text" name="cep" onKeyPress="MascaraCep(form1.cep);" maxlength="10" onBlur="ValidaCep(form1.cep)"><br><br>DATA:<input type="text" name="data" onKeyPress="MascaraData(form1.data);" maxlength="10" onBlur= "ValidaDataform1.data);"><br><br>Telefone: <input type="text" name="tel" onKeyPress="MascaraTelefone(form1.tel);" maxlength="14" onBlur="ValidaTelefone(form1.tel);"><br><br>CPF:<input type="text" name="cpf" onBlur="ValidarCPF(form1.cpf);" onKeyPress="MascaraCPF(form1.cpf);" maxlength="14"><br><br>CNPJ:<input type="text" name="cnpj" onKeyPress="MascaraCNPJ(form1.cnpj);" maxlength="18" onBlur="ValidarCNPJ(form1.cnpj);"></form></body></html>
Aqui vai o aquivo java script
MascaraValidacao.js
// JavaScript Document//adiciona mascara de cnpjfunction MascaraCNPJ(cnpj){ if(mascaraInteiro(cnpj)==false){ event.returnValue = false; } return formataCampo(cnpj, '00.000.000/0000-00', event);}//adiciona mascara de cepfunction MascaraCep(cep){ if(mascaraInteiro(cep)==false){ event.returnValue = false; } return formataCampo(cep, '00.000-000', event);}//adiciona mascara de datafunction MascaraData(data){ if(mascaraInteiro(data)==false){ event.returnValue = false; } return formataCampo(data, '00/00/0000', event);}//adiciona mascara ao telefonefunction MascaraTelefone(tel){ if(mascaraInteiro(tel)==false){ event.returnValue = false; } return formataCampo(tel, '(00) 0000-0000', event);}//adiciona mascara ao CPFfunction MascaraCPF(cpf){ if(mascaraInteiro(cpf)==false){ event.returnValue = false; } return formataCampo(cpf, '000.000.000-00', event);}//valida telefonefunction ValidaTelefone(tel){ exp = /\(\d{2}\)\ \d{4}\-\d{4}/ if(!exp.test(tel.value)) alert('Numero de Telefone Invalido!');}//valida CEPfunction ValidaCep(cep){ exp = /\d{2}\.\d{3}\-\d{3}/ if(!exp.test(cep.value)) alert('Numero de Cep Invalido!'); }//valida datafunction ValidaData(data){ exp = /\d{2}\/\d{2}\/\d{4}/ if(!exp.test(data.value)) alert('Data Invalida!'); }//valida o CPF digitadofunction ValidarCPF(Objcpf){ var cpf = Objcpf.value; exp = /\.|\-/g cpf = cpf.toString().replace( exp, "" ); var digitoDigitado = eval(cpf.charAt(9)+cpf.charAt(10)); var soma1=0, soma2=0; var vlr =11; for(i=0;i<9;i++){ soma1+=eval(cpf.charAt(i)*(vlr-1)); soma2+=eval(cpf.charAt(i)*vlr); vlr--; } soma1 = (((soma1*10)%11)==10 ? 0:((soma1*10)%11)); soma2=(((soma2+(2*soma1))*10)%11); var digitoGerado=(soma1*10)+soma2; if(digitoGerado!=digitoDigitado) alert('CPF Invalido!'); }//valida numero inteiro com mascarafunction mascaraInteiro(){ if (event.keyCode < 48 || event.keyCode > 57){ event.returnValue = false; return false; } return true;}//valida o CNPJ digitadofunction ValidarCNPJ(ObjCnpj){ var cnpj = ObjCnpj.value; var valida = new Array(6,5,4,3,2,9,8,7,6,5,4,3,2); var dig1= new Number; var dig2= new Number; exp = /\.|\-|\//g cnpj = cnpj.toString().replace( exp, "" ); var digito = new Number(eval(cnpj.charAt(12)+cnpj.charAt(13))); for(i = 0; i<valida.length; i++){ dig1 += (i>0? (cnpj.charAt(i-1)*valida[i]):0); dig2 += cnpj.charAt(i)*valida[i]; } dig1 = (((dig1%11)<2)? 0:(11-(dig1%11))); dig2 = (((dig2%11)<2)? 0:(11-(dig2%11))); if(((dig1*10)+dig2) != digito) alert('CNPJ Invalido!'); }//formata de forma generica os camposfunction formataCampo(campo, Mascara, evento) { var boleanoMascara; var Digitato = evento.keyCode; exp = /\-|\.|\/|\(|\)| /g campoSoNumeros = campo.value.toString().replace( exp, "" ); var posicaoCampo = 0; var NovoValorCampo=""; var TamanhoMascara = campoSoNumeros.length;; if (Digitato != 8) { // backspace for(i=0; i<= TamanhoMascara; i++) { boleanoMascara = ((Mascara.charAt(i) == "-") || (Mascara.charAt(i) == ".") || (Mascara.charAt(i) == "/")) boleanoMascara = boleanoMascara || ((Mascara.charAt(i) == "(") || (Mascara.charAt(i) == ")") || (Mascara.charAt(i) == " ")) if (boleanoMascara) { NovoValorCampo += Mascara.charAt(i); TamanhoMascara++; }else { NovoValorCampo += campoSoNumeros.charAt(posicaoCampo); posicaoCampo++; } } campo.value = NovoValorCampo; return true; }else { return true; }}-----------------------------------------------------------------------------------
Post Mesclado
-----------------------------------------------------------------------------------
segue abaixo o exemplo de como ficaria o codigo para limpar e colocar o focu quando for
invalido. ok!
//valida data function ValidaData(data){ exp = /\d{2}\/\d{2}\/\d{4}/ if(!exp.test(data.value)){ data.value = ""; alert('Data Invalida!'); data.select(); } }
Abraço ate++
>
Achei muito legal... só tem um porém: "event" não funciona (me parece que no IE funciona, mas quem é que usa isso, né?).
Queria encontrar algo que resolvesse isso sem que tivesse que fazer mudanças muito bruscas no código que você passou...
[]'s
explique o que você quer que eu tento te ajudar . ok!
A máscara não está funcionando pra mim.. Estou usando o Firefox 2. Acho que foi isso que o colega acima comentou.
talvez possa quebrar o galho, estava precisando de uma mascara para telefone e corrigi uma q encontrei na net, essa funciona no firefox:
<script>
function fone(){
if (document.frm.campo.value.length == 0){</script>
<form id="frm" name="frm" method="post" action="">
<input type="text" name="campo" id="campo" onkeypress="fone()"/>
</form>Só acho que ficaria melhor assim, pois além de funcionar em qualquer browser, pula para o próximo campo ou botão se desejar, basta mudar o segundo parâmetro no onKeyPress:
<script language=javascript>
<!--
function fone(obj,prox) {
switch (obj.value.length) {
case 1:
obj.value = "(" + obj.value;
break;
case 3:
obj.value = obj.value + ")";
break;
case 8:
obj.value = obj.value + "-";
break;
case 13:
prox.focus();
break;
}
}
function formata_data(obj,prox) { obj.value = obj.value + "/";
break;
case 5:
obj.value = obj.value + "/";
break;
case 9:
prox.focus();
break;
}
}
function Apenas_Numeros(caracter) var nTecla = 0;
if (document.all) {
nTecla = caracter.keyCode;
} else {
nTecla = caracter.which;
}
if ((nTecla> 47 && nTecla <58)
|| nTecla == 8 || nTecla == 127
|| nTecla == 0 || nTecla == 9 // 0 == Tab
|| nTecla == 13) { // 13 == Enter
return true;
} else {
return false;
}
}
function validaCPF(cpf)
{
erro = new String;
if (cpf.value.length == 11)
{
cpf.value = cpf.value.replace('.', '');
cpf.value = cpf.value.replace('.', '');
cpf.value = cpf.value.replace('-', '');
var nonNumbers = /\D/;
if (nonNumbers.test(cpf.value))
{
erro = "A verificacao de CPF suporta apenas números!";
}
else
{
if (cpf.value == "00000000000" ||
cpf.value == "11111111111" ||
cpf.value == "22222222222" ||
cpf.value == "33333333333" ||
cpf.value == "44444444444" ||
cpf.value == "55555555555" ||
cpf.value == "66666666666" ||
cpf.value == "77777777777" ||
cpf.value == "88888888888" ||
cpf.value == "99999999999") {
erro = "Número de CPF inválido!"
}
var a = [];
var b = new Number;
var c = 11;
for (i=0; i<11; i++){
a[i] = cpf.value.charAt(i);
if (i < 9) b += (a[i] * --c);
}
if ((x = b % 11) < 2) { a[9] = 0 } else { a[9] = 11-x }
b = 0;
c = 11;
for (y=0; y<10; y++) b += (a[y] * c--);
if ((x = b % 11) < 2) { a[10] = 0; } else { a[10] = 11-x; }
if ((cpf.value.charAt(9) != a[9]) || (cpf.value.charAt(10) != a[10])) {
erro = "Número de CPF inválido.";
}
}
}
else
{
if(cpf.value.length == 0)
return false
else
erro = "Número de CPF inválido.";
}
if (erro.length > 0) {
alert(erro);
cpf.focus();
return false;
}
return true;
}
//envento onkeyup
function maskCPF(CPF) {
var evt = window.event;
kcode=evt.keyCode;
if (kcode == 8) return;
if (CPF.value.length == 3) { CPF.value = CPF.value + '.'; }
if (CPF.value.length == 7) { CPF.value = CPF.value + '.'; }
if (CPF.value.length == 11) { CPF.value = CPF.value + '-'; }
}
// evento onBlur
function formataCPF(CPF)
{
with (CPF)
{
value = value.substr(0, 3) + '.' +
value.substr(3, 3) + '.' +
value.substr(6, 3) + '-' +
value.substr(9, 2);
}
}
function retiraFormatacao(CPF)
{
with (CPF)
{
value = value.replace (".","");
value = value.replace (".","");
value = value.replace ("-","");
value = value.replace ("/","");
}
}</script>
Tel: <form id="form" name="form" method="post" action="?">
<input name="telefone" type="text" id="telefone" maxLength="13" size="13" onKeyPress="fone(this,document.form.data)">
Formato: (11)1111-1111<br>Data:
<input name="data" type="text" id="data" onKeyPress="formata_data(this,document.form.cpf);return Apenas_Numeros(event);" size="11" maxlength="11">
Formato: MM/DD/AAAA<br><input name="cpf" type="text" class="imput" id="cpf" size="12" maxlength="11" onKeyPress="return Apenas_Numeros(event);" onBlur="validaCPF(this);">
<br>
<input type="submit" name="enviar" value="Enviar">teria como explicar para nós como funciona o esquema de pontos visgulas hifens, para que nós possamos fazer nossas proprias mascaras?
Obrigado se nao posso postar aqui me desculpe!
Sera que alguem consegue conscertar essa amscara para o FF?
Eu desenvolvi esta: http://forum.wmonline.com.br/index.php?showtopic=196136
Com um plugin da jQuery http://digitalbush.com/projects/masked-input-plugin :
$(”#data”).mask(”99/99/9999″);
$(”#cep”).mask(”99999-999″);
$(”#cpf”).mask(”999.999.999-99″);
$(”#cnpj”).mask(”99.999.999/9999-99″);
$(”#telefone”).mask(”(99) 9999-9999″);e por ai vai...
Como eu faria para atribuir essas máscaras a um TextBox numa página ASP .NET?
>
Com um plugin da jQuery http://digitalbush.com/projects/masked-input-plugin :
$(”#data”).mask(”99/99/9999″);
$(”#cep”).mask(”99999-999″);
$(”#cpf”).mask(”999.999.999-99″);
$(”#cnpj”).mask(”99.999.999/9999-99″);
$(”#telefone”).mask(”(99) 9999-9999″);e por ai vai...
é a segunda vez que vejo falar nesse plugin mas não consigo fazer em funcionar. Tô usado assim:
Salvei o JS como JQuery.js
<script src="SpryAssets/jQuery.js" type="text/javascript"></script>
A função:
jQuery(function($){
$("#txtTelefone").mask("(99)9999-9999");
$("#txtTelefoneA").mask("(99)9999-9999");
});Onde tô errando?
@Nelson Sousa, Você está chamando a biblioteca JQuery em sua página?
@Nelson Sousa, Você está chamando a biblioteca JQuery em sua página?
Não seria nessa linha?
<script src="SpryAssets/jQuery.js" type="text/javascript"></script>
Nelson souza, tive a mesma duvida e demorei pra entender....voce precisa de 2 .js pra fazer rolar...
Tem que baixar os arquivos JavaScript do
jQuery -->http://www.jquery.com
e do Masked Input--->http://digitalbush.com/projects/masked-input-plugin
Dai você faz conforme exemplo abaixo...
http://www.revistaphp.com.br/artigo.php?id=174
espero ter ajudado em tempo...agnaldo
Sei que a postagem esta um pouco antiga, mas obtive uma duvida. Não configo fazer pegar a mascara do Telefone.
Como proceder?
Achei muito legal... só tem um porém: "event" não funciona (me parece que no IE funciona, mas quem é que usa isso, né?).
Queria encontrar algo que resolvesse isso sem que tivesse que fazer mudanças muito bruscas no código que você passou...
[]'s