Como validar CPF em campo de texto com JavaScript puro

Validar um CPF (Cadastro de Pessoas Físicas) é uma tarefa essencial para garantir a integridade de dados em sistemas web. Com JavaScript puro, é possível implementar uma solução robusta e eficiente, sem depender de bibliotecas externas. Este método é ideal para desenvolvedores que buscam simplicidade e confiabilidade.

Pré-requisitos

• Conhecimento básico em JavaScript.
• Um ambiente de desenvolvimento web (HTML, CSS e JavaScript).

Passo 1: Criar a função de validação

Primeiro, vamos criar uma função que receba o CPF como string e retorne um booleano indicando se o CPF é válido ou não. A função deve remover caracteres não numéricos e verificar se o CPF segue o padrão de validação.

function validarCPF(cpf) {
  // Remover caracteres não numéricos
  cpf = cpf.replace(/[^\d]/g, '');

  // Verificar se o CPF tem 11 dígitos
  if (cpf.length !== 11) return false;

  // Verificar se todos os dígitos são iguais
  if (/^(\d)\1{10}$/.test(cpf)) return false;

  // Calcular o primeiro dígito verificador
  let soma = 0;
  for (let i = 0; i < 9; i++) {
    soma += parseInt(cpf.charAt(i)) * (10 - i);
  }
  let resto = (soma * 10) % 11;
  if (resto === 10 || resto === 11) resto = 0;
  if (resto !== parseInt(cpf.charAt(9))) return false;

  // Calcular o segundo dígito verificador
  soma = 0;
  for (let i = 0; i < 10; i++) {
    soma += parseInt(cpf.charAt(i)) * (11 - i);
  }
  resto = (soma * 10) % 11;
  if (resto === 10 || resto === 11) resto = 0;
  if (resto !== parseInt(cpf.charAt(10))) return false;

  return true;
}

Passo 2: Implementar no campo de texto

Agora, vamos integrar a função de validação em um campo de texto HTML. Usaremos o evento `onblur` para validar o CPF quando o usuário sair do campo.

<input type="text" id="cpf" placeholder="Digite o CPF">
<span id="mensagem"></span>

<script>
document.getElementById('cpf').addEventListener('blur', function() {
  const cpf = this.value;
  const mensagem = document.getElementById('mensagem');
  if (validarCPF(cpf)) {
    mensagem.textContent = 'CPF válido!';
    mensagem.style.color = 'green';
  } else {
    mensagem.textContent = 'CPF inválido!';
    mensagem.style.color = 'red';
  }
});
</script>

Exemplo Prático

Conclusão

Com este método, você pode validar CPFs de forma eficiente e confiável usando apenas JavaScript puro. A implementação é simples e pode ser facilmente integrada em qualquer sistema web, garantindo a precisão dos dados de seus usuários.