Mascara e Validação utilizando JavaScript


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);">           

 

 

Comentários

Postagens mais visitadas deste blog

O QUE É BROADCASTING?

Desativar tecla F5 e CRTL+R utilizando JavaScript

Códigos Prontos em Pascal