Loading
carregando...

Validação de CPF com jQuery


Olá galera ...

Hoje vamos apreder como validar um campo de CPF com jquery.

Bom não vou ficar com rodeios e mãos a obra!!

Primeira mente vc precisará de 2 plugins o jQuery e o Validate jQuery, inclua os plugins na TAG head do seu HTML, segue abaixo uma opção caso vc não tenha esses plugins:

  1.  
  2. <script type="text/javascript" src="https://darcweb.com.br/sysco/javascript/basic/jquery.min.js?1.6.8"></script>
  3. <script type="text/javascript" src="https://darcweb.com.br/template/js/jquery.validate.js"></script>
  4.  



Agora vamos ao tramite da função para fazer avalidação de CPF, inclua também em sua TAGS head do HTML:

  1.  
  2. <script type="text/javascript">
  3.   jQuery.validator.addMethod("verificaCPF", function(value, element) {
  4.       value = value.replace('.','');
  5.       value = value.replace('.','');
  6.       cpf = value.replace('-','');
  7.       while(cpf.length < 11) cpf = "0"+ cpf;
  8.       var expReg = /^0+$|^1+$|^2+$|^3+$|^4+$|^5+$|^6+$|^7+$|^8+$|^9+$/;
  9.       var a = [];
  10.       var b = new Number;
  11.       var c = 11;
  12.       for (i=0; i<11; i++){
  13.           a[i] = cpf.charAt(i);
  14.           if (i < 9) b += (a[i] * --c);
  15.       }
  16.       if ((x = b % 11) < 2) { a[9] = 0 } else { a[9] = 11-x }
  17.       b = 0;
  18.       c = 11;
  19.       for (y=0; y<10; y++) b += (a[y] * c--);
  20.       if ((x = b % 11) < 2) { a[10] = 0; } else { a[10] = 11-x; }
  21.       if ((cpf.charAt(9) != a[9]) || (cpf.charAt(10) != a[10]) || cpf.match(expReg)) return false;
  22.       return true;
  23.   }, "Informe um CPF válido."); // Mensagem padrão
  24.  
  25.   $(document).ready(function(){                
  26.     $("#validate").validate({                   
  27.         rules:{
  28.         CampoCPF:{required: true, verificaCPF: true}
  29.         },        
  30.         messages:{
  31.         CampoCPF:{required: "Digite seu cpf", verificaCPF: "CPF inválido"},
  32.         },                           
  33.     });        
  34.   });
  35. </script>
  36.  


Pronto ...
feito esses dois passos segue abaixo um exemplo do código HTML completo...

  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
  3. <html xmlns="http://www.w3.org/1999/xhtml">
    
  4. <head>
    
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
  6. <title>Validação de CPF</title>
    
  7. <script type="text/javascript" src="https://darcweb.com.br/sysco/javascript/basic/jquery.min.js?1.6.8"></script>
    
  8. <script type="text/javascript" src="https://darcweb.com.br/template/js/jquery.validate.js"></script>
    
  9.  
  10. <script type="text/javascript">
    
  11.   jQuery.validator.addMethod("verificaCPF", function(value, element) {
    
  12.       value = value.replace('.','');
    
  13.       value = value.replace('.','');
    
  14.       cpf = value.replace('-','');
    
  15.       while(cpf.length < 11) cpf = "0"+ cpf;
    
  16.       var expReg = /^0+$|^1+$|^2+$|^3+$|^4+$|^5+$|^6+$|^7+$|^8+$|^9+$/;
    
  17.       var a = [];
    
  18.       var b = new Number;
    
  19.       var c = 11;
    
  20.       for (i=0; i<11; i++){
    
  21.           a[i] = cpf.charAt(i);
    
  22.           if (i < 9) b += (a[i] * --c);
    
  23.       }
    
  24.       if ((x = b % 11) < 2) { a[9] = 0 } else { a[9] = 11-x }
    
  25.       b = 0;
    
  26.       c = 11;
    
  27.       for (y=0; y<10; y++) b += (a[y] * c--);
    
  28.       if ((x = b % 11) < 2) { a[10] = 0; } else { a[10] = 11-x; }
    
  29.       if ((cpf.charAt(9) != a[9]) || (cpf.charAt(10) != a[10]) || cpf.match(expReg)) return false;
    
  30.       return true;
    
  31.   }, "Informe um CPF válido."); // Mensagem padrão
    
  32.  
  33.   $(document).ready(function(){                
    
  34.     $("#validate").validate({                   
    
  35.         rules:{
    
  36.         CampoCPF:{required: true, verificaCPF: true}
    
  37.         },        
    
  38.         messages:{
    
  39.         CampoCPF:{required: "Digite seu cpf", verificaCPF: "CPF inválido"},
    
  40.         },                           
    
  41.     });        
    
  42.   });
    
  43. </script>
    
  44.  
  45. </head>
    
  46. <body>
    
  47.  
  48. <form id="validate" name="validate" method="post" enctype="multipart/form-data" action="">
    
  49.   <input type="text" id="CampoCPF" name="CampoCPF" value="" />
    
  50.   <input type="submit" value="Enviar" />
    
  51. </form>
    
  52.  
  53. </body>
    
  54. </html>
    
  55.  


É isso pessoal... espero que ajude!!
Abrass tt


Autor: Darc Web - Soluções web
Data: 28/04/2014 13:04:48