-1

Galera Sou iniciante na área e queria saber como faço para validar cpf com máscara em javascript, eu andei pesquisando e não consegui achar um que fizesse os dois ao mesmo tempo. Tenho um exemplo que tinha feito que no caso a validação era feita online, mas o site que eu usava a validação saiu do ar. Desde Já Agradeço.

<html>
<head>
  <title>Validar CPF com Máscara by TchekiGamer</title>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="language" content="PT-BR"/>

    <script src="http://www.geradorcpf.com/scripts.js"></script>
    <script src="http://www.geradorcpf.com/jquery-1.2.6.pack.js"></script>
    <script src="http://www.geradorcpf.com/jquery.maskedinput-1.1.4.pack.js"></script>

    </script>

    <script type="text/javascript">$(document).ready(function(){  
      $(".cpf").mask("999.999.999-99");   

      $("#cpf").blur(function (){
        if($("#cpf").val() == '') {           
          $("#saida").html("Informe um CPF");         
          return false;   
        }    
        if(validarCPF($("#cpf").val())) {         
          $(".cpf").css('border-color','limegreen');     
        } 
        else {            
          $(".cpf").css('border-color','red');     
        } 
      });
    });
  </script>
</head>

<body>

  <form id="form1" name="form1" method="post" action="">

    <div align="center" id="saida1">
      <label>Digite o seu cpf</label>
      <input name="cpf" type="text" class="cpf" id="cpf">
    </div>

    <div align="center" id="saida1">
      <label>Teste</label>
      <input name="teste" type="text" class="teste">
    </div>

    <div align="center" id="saida" class="style7"> <!--aparece mensagem de CPF Invalido--> </div>

  </form>
</body>
</html>
0

3 Respostas 3

4

Usando a resposta do nosso amigo Leo Caracciolo apenas acrescentei uma máscara para deixar bonitinho do conforme o seu pedido (máscara + validador).

function ValidaCPF(){	
	var RegraValida=document.getElementById("RegraValida").value; 
	var cpfValido = /^(([0-9]{3}.[0-9]{3}.[0-9]{3}-[0-9]{2})|([0-9]{11}))$/;	 
	if (cpfValido.test(RegraValida) == true)	{ 
	console.log("CPF Válido");	
	} else	{	 
	console.log("CPF Inválido");	
	}
    }
  function fMasc(objeto,mascara) {
obj=objeto
masc=mascara
setTimeout("fMascEx()",1)
}

  function fMascEx() {
obj.value=masc(obj.value)
}

   function mCPF(cpf){
cpf=cpf.replace(/\D/g,"")
cpf=cpf.replace(/(\d{3})(\d)/,"$1.$2")
cpf=cpf.replace(/(\d{3})(\d)/,"$1.$2")
cpf=cpf.replace(/(\d{3})(\d{1,2})$/,"$1-$2")
return cpf
}
<input type="text" id="RegraValida" value="" name="RegraValida" onkeydown="javascript: fMasc( this, mCPF );"><input type="submit" value="Validar" onclick="ValidaCPF();">

1
  • Muito Obrigado Colega ,me ajudou muito, era exatamente o que eu estava precisando Commented 5/05/2018 às 19:55
2

Provável erro no seu arquivo.

  • O seu código funcionará se incluir a biblioteca que falta, exemplo:
    • <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  • Seu arquivo tem um </script> a mais após a chamada do arquivo jquery.maskedinput-1.1.4.pack.js (não acarreta erro porém ...)

    Para não ficar dependendo de outros sites, salve os arquivos .js no seu servidor

    ou use o script abaixo

Com Javascript

Aproveitando a resposta do nosso amigo brnTwp e acrescentando a validação de cpfs segundo a regra da receita federal temos:

function is_cpf (c) {

  if((c = c.replace(/[^\d]/g,"")).length != 11)
    return false

  if (c == "00000000000")
    return false;

  var r;
  var s = 0;

  for (i=1; i<=9; i++)
    s = s + parseInt(c[i-1]) * (11 - i);

  r = (s * 10) % 11;

  if ((r == 10) || (r == 11))
    r = 0;

  if (r != parseInt(c[9]))
    return false;

  s = 0;

  for (i = 1; i <= 10; i++)
    s = s + parseInt(c[i-1]) * (12 - i);

  r = (s * 10) % 11;

  if ((r == 10) || (r == 11))
    r = 0;

  if (r != parseInt(c[10]))
    return false;

  return true;
}


function fMasc(objeto,mascara) {
obj=objeto
masc=mascara
setTimeout("fMascEx()",1)
}

  function fMascEx() {
obj.value=masc(obj.value)
}

function mCPF(cpf){
cpf=cpf.replace(/\D/g,"")
cpf=cpf.replace(/(\d{3})(\d)/,"$1.$2")
cpf=cpf.replace(/(\d{3})(\d)/,"$1.$2")
cpf=cpf.replace(/(\d{3})(\d{1,2})$/,"$1-$2")
return cpf
}

cpfCheck = function (el) {
    document.getElementById('cpfResponse').innerHTML = is_cpf(el.value)? '<span style="color:green">válido</span>' : '<span style="color:red">inválido</span>';
    if(el.value=='') document.getElementById('cpfResponse').innerHTML = '';
}
<p>Digite o CPF:</p>
<p><input id="cpf" type="text" onkeyup="cpfCheck(this)" maxlength="18" onkeydown="javascript: fMasc( this, mCPF );"> <span id="cpfResponse"></span></p>

3
  • Olá eu acabei de testar seu código e acabei de colocar um cpf por exemplo 444.444.444-44 e esse está errado e não sei o que fazer Commented 9/05/2018 às 12:13
  • @GuilhermeHenrique, veja que na resposta destaquei e acrescentando a validação de cpfs segundo a regra da receita federal, portanto, esse cpf 444.444.444-44, segundo a receita federal, não é um CPF válido. A quem interessa um CPF inválido? A minha resposta além da mascara só aceita CPFs realmente válidos, ao contrário das respostas
    – user60252
    Commented 9/05/2018 às 15:50
  • está mostrando valido pra 444.444.444-44 Commented 23/03/2020 às 11:37
0

Você pode deixar o cara digitar os números sem colocar os pontos e depois dar um replace com o código abaixo.

function replaceCPF(cpf){
  return cpf.replace(/^(\d{3})(\d{3})(\d{3})(\d{2})/, "$1.$2.$3-$4");
}

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .