Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Oliveira Junior

Mascara e Validação de CPF+CNPJ+CEP+DATA+TELEFONE

Por , em Javascript

Recommended Posts

Oliveira Junior    0

Oliveira Junior
Postado

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++

Compartilhar este post

Link para o post
Compartilhar em outros sites

nan    0

nan
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Oliveira Junior    0

Oliveira Junior
Postado

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!

Compartilhar este post

Link para o post
Compartilhar em outros sites

ucx    0

ucx
Postado

A máscara não está funcionando pra mim.. Estou usando o Firefox 2. Acho que foi isso que o colega acima comentou.

Compartilhar este post

Link para o post
Compartilhar em outros sites

nknk    3

nknk
Postado

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){
document.frm.campo.value = "(" + document.frm.campo.value; }
if (document.frm.campo.value.length == 4){
document.frm.campo.value = document.frm.campo.value + ")"; }
if (document.frm.campo.value.length == 9){
document.frm.campo.value = document.frm.campo.value + "-";}
}
</script>
<form id="frm" name="frm" method="post" action="">
  <input type="text" name="campo" id="campo" onkeypress="fone()"/>
</form>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Cristiano Lagame    0

Cristiano Lagame
Postado

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) {
switch (obj.value.length) {
	case 2:
		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>
CPF: 
<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">

Compartilhar este post

Link para o post
Compartilhar em outros sites

hunternh    2

hunternh
Postado

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...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Nelson Sousa    0

Nelson Sousa
Postado

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?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Agnaldo    0

Agnaldo
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Léo Motta    1

Léo Motta
Postado

Sei que a postagem esta um pouco antiga, mas obtive uma duvida. Não configo fazer pegar a mascara do Telefone.

 

Como proceder?

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito