JSFiddle - React, Tailwind, and code Playground
by maleol
HTML
<form>
<div class="form-group">
<label for="cpf">
Insira o CPF:
<input id="cpf" type="text" class="form-control" maxlength="14" placeholder="Ex. 123.456.789-01" required />
<div id="resultadoValidacao"></div>
</label>
</div>
<button type="button" id="validarCPF" class="btn btn-primary">Validar CPF</button>
</form>
JavaScript
$(document).ready(function(){
$("#cpf").mask("999.999.999-99");
$("#validarCPF").click(function() {
if($("#cpf").val() == '') {
$("#resultadoValidacao").html("<span style='color: red'>Informe um CPF</span>");
return false;
}
if(validarCPF($("#cpf").val())) {
$("#resultadoValidacao").html("<span style='color: green'>CPF Válido</span>");
} else {
$("#resultadoValidacao").html("<span style='color: red'>CPF Inválido</span>");
}
});
});
function validarCPF(cpf) {
cpf = cpf.replace(/[^\d]+/g,'');
if(cpf == '') return false;
// Elimina CPFs invalidos conhecidos
if (cpf.length != 11 ||
cpf == "00000000000" ||
cpf == "11111111111" ||
cpf == "22222222222" ||
cpf == "33333333333" ||
cpf == "44444444444" ||
cpf == "55555555555" ||
cpf == "66666666666" ||
cpf == "77777777777" ||
cpf == "88888888888" ||
cpf == "99999999999")
return false;
// Valida 1o digito
add = 0;
for (i=0; i < 9; i ++)
add += parseInt(cpf.charAt(i)) * (10 - i);
rev = 11 - (add % 11);
if (rev == 10 || rev == 11)
rev = 0;
if (rev != parseInt(cpf.charAt(9)))
return false;
// Valida 2o digito
add = 0;
for (i = 0; i < 10; i ++)
add += parseInt(cpf.charAt(i)) * (11 - i);
rev = 11 - (add % 11);
if (rev == 10 || rev == 11)
rev = 0;
if (rev != parseInt(cpf.charAt(10)))
return false;
return true;
}