Trago hoje um exemplo simples de validação de cpf com o uso do plugin validator bootstrap.
Coloco abaixo o código e umas pequenas explicações.
html
<form id="cpf_form" class="form-horizontal">
<div class="form-group">as
<div class="col-md-4">
<label class="control-label" id="campo">CPF</label>
<input type="text" class="form-control" name="cpf" maxlength="14" onkeypress="formatar('###.###.###-##', this);" />
</div>
</div>
</form>
JS
mascara - colocar no head
<script> function formatar(mascara, documento){ var i = documento.value.length; var saida = mascara.substring(0,1); var texto = mascara.substring(i) if (texto.substring(0,1) != saida){ documento.value += texto.substring(0,1); } }</script>
validador
<script>
$(document).ready(function() {
$('#cpf_form').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
cpf: {
validators: {
callback: {
message: 'CPF Invalido',
callback: function(value) {
//retira mascara e nao numeros
cpf = value.replace(/[^\d]+/g,'');
if(cpf == '') return false;
if (cpf.length != 11) return false;
// testa se os 11 digitos são iguais, que não pode.
var valido = 0;
for (i=1; i < 11; i++){
if (cpf.charAt(0)!=cpf.charAt(i)) valido =1;
}
if (valido==0) return false;
// calculo primeira parte
aux = 0;
for (i=0; i < 9; i ++)
aux += parseInt(cpf.charAt(i)) * (10 - i);
check = 11 - (aux % 11);
if (check == 10 || check == 11)
check = 0;
if (check != parseInt(cpf.charAt(9)))
return false;
//calculo segunda parte
aux = 0;
for (i = 0; i < 10; i ++)
aux += parseInt(cpf.charAt(i)) * (11 - i);
check = 11 - (aux % 11);
if (check == 10 || check == 11)
check = 0;
if (check != parseInt(cpf.charAt(10)))
return false;
return true;
}
}
}
}
}
});
});
</script>
Programa completo
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BootstrapValidator demo</title>
<link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="../dist/css/bootstrapValidator.css"/>
<!-- Include the FontAwesome CSS if you want to use feedback icons provided by FontAwesome -->
<!--<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" />-->
<script type="text/javascript" src="../vendor/jquery/jquery.min.js"></script>
<script type="text/javascript" src="../vendor/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../dist/js/bootstrapValidator.js"></script>
<script>
function formatar(mascara, documento){
var i = documento.value.length;
var saida = mascara.substring(0,1);
var texto = mascara.substring(i)
if (texto.substring(0,1) != saida){
documento.value += texto.substring(0,1);
}
}
</script>
</head>
<body>
<div class="container">
<div class="row">
<h1> Testa CPF </h1><br><br>
<h3> by Álvaro Grisolfi </h3>
<form id="cpf_form" class="form-horizontal">
<div class="form-group">
<div class="col-md-4">
<label class="control-label" id="campo">CPF</label>
<input type="text" class="form-control" name="cpf" maxlength="14" onkeypress="formatar('###.###.###-##', this);" />
</div>
</div>
</form>
</div>
</div>
<script>
$(document).ready(function() {
$('#cpf_form').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
cpf: {
validators: {
callback: {
message: 'Wrong answer',
callback: function(value) {
cpf = value.replace(/[^\d]+/g,'');
if(cpf == '') return false;
if (cpf.length != 11) return false;
// testa se os 11 digitos são iguais, que não pode.
var valido = 0;
for (i=1; i < 11; i++){
if (cpf.charAt(0)!=cpf.charAt(i)) valido =1;
}
if (valido==0) return false;
aux = 0;
for (i=0; i < 9; i ++)
aux += parseInt(cpf.charAt(i)) * (10 - i);
check = 11 - (aux % 11);
if (check == 10 || check == 11)
check = 0;
if (check != parseInt(cpf.charAt(9)))
return false;
aux = 0;
for (i = 0; i < 10; i ++)
aux += parseInt(cpf.charAt(i)) * (11 - i);
check = 11 - (aux % 11);
if (check == 10 || check == 11)
check = 0;
if (check != parseInt(cpf.charAt(10)))
return false;
return true;
}
}
}
}
}
});
});
</script>
</body>
</html>
Link do projeto aqui
Nenhum comentário:
Postar um comentário