Índice
Introdução
Criar um gerador de CPF útil e funcional usando apenas HTML, CSS e JavaScript é uma habilidade valiosa para desenvolvedores web, especialmente aqueles envolvidos em projetos que requerem validação de formulários ou testes de software. Este tutorial passo a passo mostra como você pode facilmente implementar essa ferramenta no seu site ou projeto pessoal.
Veja Isso em Ação
Para entender melhor como esses elementos trabalham juntos na prática, confira a implementação ao vivo. Esta demonstração interativa permite que você veja imediatamente o resultado de alterações no código e como o gerador de CPF opera em tempo real. Experimente agora e veja como você pode incorporar funcionalidades similares em seus próprios projetos!
See the Pen Gerador de CPF – Código Fácil by Código Fácil (@CodigoFacil) on CodePen.
O Que Você Vai Precisar
Antes de começar, certifique-se de que você tem um ambiente básico de desenvolvimento pronto para usar HTML, CSS e JavaScript. Você não precisa de nenhum framework ou biblioteca adicional, o que torna este projeto acessível mesmo para iniciantes.
Passo 1: Estruturar o HTML
Primeiro, vamos criar a estrutura básica da nossa página que incluirá um campo de entrada para exibir o CPF, botões para gerar e validar o CPF, e um checkbox para escolher se o CPF deve ter pontuação.
index.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Gerador de CPF</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Container para os elementos de entrada e botões -->
<div id="cpf-container">
<input type="text" id="cpf" placeholder="CPF aparecerá aqui...">
<button onclick="gerarCPF()">Gerar CPF</button>
<button onclick="validarCPF()">Validar CPF</button>
<!-- Checkbox para alterar a formatação do CPF gerado -->
<label><input type="checkbox" id="pontuacao" checked> Incluir pontuação</label>
</div>
<script src="script.js"></script>
</body>
</html>Passo 2: Adicionar Estilos com CSS
Para tornar nossa interface mais atraente, vamos adicionar alguns estilos básicos usando CSS. Isso incluirá estilização para o container, campo de texto e botões.
style.css
/* Estilo geral do container que agrupa os elementos */
#cpf-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 20px;
background: #f7f7f7;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
/* Estilização uniforme para os campos de texto e botões */
#cpf-container input[type="text"], #cpf-container button {
width: 200px;
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
/* Estilos específicos para os botões, incluindo um efeito hover */
#cpf-container button {
background-color: #4CAF50;
color: white;
cursor: pointer;
transition: background-color 0.3s;
}
#cpf-container button:hover {
background-color: #45a049;
}Passo 3: Implementar a Lógica com JavaScript
Agora, vamos adicionar a funcionalidade para gerar e validar CPFs. Isso inclui funções para gerar um número de CPF válido aleatoriamente, formatar com ou sem pontuação e validar um CPF fornecido.
script.js
// Adiciona um evento ao checkbox para alterar a formatação do CPF exibido no campo de texto
document.getElementById('pontuacao').addEventListener('change', function() {
let cpfField = document.getElementById('cpf');
// Verifica se o checkbox está marcado e formata ou remove a pontuação do CPF conforme necessário
cpfField.value = this.checked ? formatarCPF(cpfField.value) : removerPontuacao(cpfField.value);
});
// Função para gerar um CPF válido e exibi-lo no campo de texto
function gerarCPF() {
let cpf = gerarCPFValido(); // Gera um CPF válido
// Verifica se a pontuação deve ser incluída e atualiza o campo de texto adequadamente
document.getElementById('cpf').value = document.getElementById('pontuacao').checked ? formatarCPF(cpf) : removerPontuacao(cpf);
}
// Função para validar o CPF inserido pelo usuário e mostrar uma mensagem de alerta
function validarCPF() {
let cpf = document.getElementById('cpf').value;
// Alerta o usuário se o CPF é válido ou não
alert(isCPFValido(cpf) ? "CPF válido!" : "CPF inválido!");
}
// Função para gerar um número de CPF válido aleatoriamente
function gerarCPFValido() {
// Gera os nove primeiros dígitos do CPF aleatoriamente
let cpf = Array.from({length: 9}, () => Math.floor(Math.random() * 9)).join('');
// Adiciona os dois dígitos verificadores ao final do CPF
cpf += calcularDigitos(cpf);
return cpf;
}
// Função para formatar um CPF adicionando pontos e traço
function formatarCPF(cpf) {
// Usa expressão regular para inserir pontos e traço nos locais corretos
return cpf.replace(/^(\d{3})(\d{3})(\d{3})(\d{2})$/, "$1.$2.$3-$4");
}
// Função para remover toda pontuação de um CPF
function removerPontuacao(cpf) {
// Remove todos os caracteres que não são dígitos
return cpf.replace(/[^\d]/g, '');
}
// Função para calcular os dígitos verificadores de um CPF
function calcularDigitos(cpf) {
let soma, resto;
// Calcula o primeiro dígito verificador
soma = cpf.split('').reduce((acc, cur, i) => acc + cur * (10 - i), 0);
resto = (soma * 10) % 11;
let primeiroDigito = resto === 10 ? 0 : resto;
// Calcula o segundo dígito verificador
soma = cpf.split('').reduce((acc, cur, i) => acc + cur * (11 - i), primeiroDigito * 2);
resto = (soma * 10) % 11;
let segundoDigito = resto === 10 ? 0 : resto;
// Retorna os dois dígitos como string
return `${primeiroDigito}${segundoDigito}`;
}
// Função para validar se um CPF é matematicamente correto
function isCPFValido(cpf) {
// Remove pontuações para garantir apenas dígitos
cpf = removerPontuacao(cpf);
// Verifica se o CPF tem 11 dígitos e não é uma sequência de dígitos repetidos
if (cpf.length !== 11 || new Set(cpf).size === 1) return false;
// Separa o corpo do CPF e os dígitos verificadores
let [corpo, digitos] = [cpf.slice(0, 9), cpf.slice(9)];
// Compara os dígitos verificadores com o cálculo baseado no corpo do CPF
return digitos === calcularDigitos(corpo);
}
Conclusão
Parabéns! Você agora tem um gerador e validador de CPF totalmente funcional, feito apenas com HTML, CSS e JavaScript. Este projeto não apenas melhora suas habilidades de desenvolvimento web, mas também fornece uma ferramenta útil que pode ser integrada em projetos mais complexos.
Este tutorial é ideal para desenvolvedores que desejam entender melhor a manipulação de strings e eventos em JavaScript, além de práticas de validação de entrada de dados.
Se você se interessou aprenda a criar mais projetos práticos. Esperamos que você encontre este guia útil para seus projetos e aprendizado!
