Os exemplos abaixo mostram como criar máscaras para campos
dos tipos:
·
CNPJ;
·
CPF;
·
CEP;
·
Data;
·
Telefone;
Os campos de CNPJ e CPF realizam a verificação de tais
campos para verificar se são documentos válidos
<script language="javascript" type="text/javascript">
//Máscara de CNPJ
function
MascaraCNPJ(cnpj) {
if
(mascaraInteiro(cnpj) == false) {
event.returnValue = false;
}
return
formataCampo(cnpj, '00.000.000/0000-00',
event);
}
//Máscara
ao CPF
function
MascaraCPF(cpf) {
if
(mascaraInteiro(cpf) == false) {
event.returnValue = false;
}
return
formataCampo(cpf, '000.000.000-00', event);
}
//Máscara
de CEP
function
MascaraCep(cep) {
if
(mascaraInteiro(cep) == false) {
event.returnValue = false;
}
return
formataCampo(cep, '00.000-000', event);
}
//Máscara
de Data
function
MascaraData(data) {
if
(mascaraInteiro(data) == false) {
event.returnValue = false;
}
return
formataCampo(data, '00/00/0000', event);
}
//Máscara
ao Telefone (9 digitos)
function
MascaraTelefone(tel) {
if
(mascaraInteiro(tel) == false) {
event.returnValue = false;
}
return
formataCampo(tel, '(00) 0000-0000', event);
}
//validar
CNPJ
function
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!');
}
}
//Validar
CPF
function
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!');
}
}
//Validar
CEP
function
ValidaCep(cep) {
exp =
/\d{2}\.\d{3}\-\d{3}/
if (!exp.test(cep.value)) {
alert('Cep Invalido!');
}
}
//Validar
data
function
ValidaData(data) {
exp =
/\d{2}\/\d{2}\/\d{4}/
if (!exp.test(data.value))
{
alert('Data Invalida!');
}
}
//Validar
Telefone
function ValidaTelefone(tel) {
exp = /\(\d{2}\)\ \d{4}\-\d{4}/
if (!exp.test(tel.value))
{
alert('Telefone Invalido!');
}
}
//Validar
número inteiro com mascara
function mascaraInteiro() {
if
(event.keyCode < 48 || event.keyCode > 57) {
event.returnValue = false;
return
false;
}
return
true;
}
//formatar
os campos
function
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;
}
}
</script>
<h1 style="color:#FF9933">Máscara e validações com JavaScript</h1>
<label type="text" style="font-family:Verdana,Arial;" >CNPJ</label>
<input type="text" name="cnpj" onKeyPress="MascaraCNPJ(form1.cnpj);" maxlength="18"
onBlur="ValidarCNPJ(form1.cnpj);">
<p></p>
<label type="text" style="font-family:Verdana,Arial">CPF</label>
<input type="text" name="cpf" onBlur="ValidarCPF(form1.cpf);" onKeyPress="MascaraCPF(form1.cpf);"
maxlength="14">
<p></p>
<label type="text" style="font-family:Verdana,Arial">CEP</label>
<input type="text" name="cep" onKeyPress="MascaraCep(form1.cep);" maxlength="10"
onBlur="ValidaCep(form1.cep)">
<p></p>
<label type="text" style="font-family:Verdana,Arial">Data</label>
<input type="text" name="data" onKeyPress="MascaraData(form1.data);" maxlength="10"
onBlur= "ValidaDataform1.data);">
<p></p>
<label type="text" style="font-family:Verdana,Arial">Telefone</label>
<input type="text" name="tel" onKeyPress="MascaraTelefone(form1.tel);" maxlength="14" onBlur="ValidaTelefone(form1.tel);">
