Como validar e-mail e CPF em JavaScript

Validar informações de usuários, como e-mail e CPF, é uma tarefa essencial em formulários de inscrição, cadastros e aplicações web. Uma validação adequada garante que os dados inseridos estão no formato correto, evitando problemas futuros. Neste post, vamos aprender como validar e-mail e CPF em JavaScript, com exemplos práticos para implementar essas validações.

Validação de e-mail em JavaScript

A validação de e-mails pode ser feita utilizando expressões regulares (RegEx), que são padrões de busca usados para verificar se a string segue um formato específico. No caso de um e-mail, precisamos garantir que ele contém, no mínimo, um nome de usuário, um símbolo “@” e um domínio válido.

Exemplo de validação de e-mail:

function validarEmail(email) {
    const regexEmail = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    return regexEmail.test(email);
}

// Exemplo de uso
console.log(validarEmail("usuario@dominio.com")); // true
console.log(validarEmail("usuario@dominio")); // false

Explicação:

• Expressão regular: A expressão /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/ verifica se o e-mail segue o formato correto:
  
  
  • [a-zA-Z0-9._-]+: Aceita letras, números e alguns caracteres especiais antes do símbolo @.
    
    
  • @[a-zA-Z0-9.-]+: Verifica o domínio após o @, que pode conter letras, números e pontos.
    
    
  • \.[a-zA-Z]{2,}: Exige que o domínio termine com uma extensão de 2 ou mais letras, como .com, .org, etc.
    
    
• Método test(): O método testa se a string de entrada (e-mail) corresponde ao padrão da expressão regular.

Testando o código:

console.log(validarEmail("teste@exemplo.com"));  // true
console.log(validarEmail("email_invalido"));     // false

Validação de CPF em JavaScript

A validação de CPF é um pouco mais complexa, pois envolve a verificação dos dígitos verificadores. O CPF é composto por 11 dígitos e possui uma regra específica para calcular os dois últimos dígitos, conhecidos como dígitos verificadores.

Regras básicas:

• Um CPF válido segue o formato XXX.XXX.XXX-XX, mas os pontos e traços podem ser desconsiderados na validação.
  
  
• O algoritmo de validação do CPF envolve a multiplicação dos primeiros 9 dígitos por pesos decrescentes, e o resultado determina os dígitos verificadores.

Exemplo de validação de CPF:

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

    if (cpf.length !== 11 || /^(\d)\1{10}$/.test(cpf)) {
        return false; // CPF inválido se não tiver 11 dígitos ou se for composto por números repetidos
    }

    let soma = 0;
    let resto;

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

    soma = 0;

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

    return true;
}

// Exemplo de uso
console.log(validarCPF("123.456.789-09")); // false (inválido)
console.log(validarCPF("111.444.777-35")); // true (válido)

Explicação:

• Remoção de caracteres especiais: A linha cpf.replace(/[^\d]+/g, '') remove pontos, traços ou outros caracteres não numéricos, deixando apenas os dígitos.
  
  
• Validação de dígitos repetidos: A expressão regular /^(\d)\1{10}$/ verifica se todos os dígitos do CPF são repetidos, como 111.111.111-11, que é um CPF inválido.
  
  
• Cálculo dos dígitos verificadores: A lógica de multiplicação e soma dos primeiros 9 dígitos determina o 10º dígito. O mesmo processo é repetido para o 11º dígito.

Testando o código:

console.log(validarCPF("111.222.333-96")); // false
console.log(validarCPF("987.654.321-00")); // false
console.log(validarCPF("123.456.789-09")); // false
console.log(validarCPF("111.444.777-35")); // true

Validação com interface HTML

Vamos criar um formulário simples para validar e-mails e CPFs inseridos pelo usuário:

HTML:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Validação de E-mail e CPF</title>
</head>
<body>
    <h1>Validação de E-mail e CPF</h1>

    <form>
        <label for="email">E-mail:</label>
        <input type="text" id="email" placeholder="Digite seu e-mail">
        <p id="emailErro" style="color: red;"></p>

        <label for="cpf">CPF:</label>
        <input type="text" id="cpf" placeholder="Digite seu CPF" maxlength="14">
        <p id="cpfErro" style="color: red;"></p>

        <button type="button" onclick="validar()">Validar</button>
    </form>

    <p id="resultado"></p>

    <script src="script.js"></script>
</body>
</html>

JavaScript (script.js):

function validarEmail(email) {
    const regexEmail = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    return regexEmail.test(email);
}

function validarCPF(cpf) {
    cpf = cpf.replace(/[^\d]+/g, '');

    if (cpf.length !== 11 || /^(\d)\1{10}$/.test(cpf)) {
        return false;
    }

    let soma = 0;
    let resto;

    for (let i = 1; i <= 9; i++) {
        soma += parseInt(cpf.substring(i - 1, i)) * (11 - i);
    }
    resto = (soma * 10) % 11;
    if (resto === 10 || resto === 11) resto = 0;
    if (resto !== parseInt(cpf.substring(9, 10))) return false;

    soma = 0;
    for (let i = 1; i <= 10; i++) {
        soma += parseInt(cpf.substring(i - 1, i)) * (12 - i);
    }
    resto = (soma * 10) % 11;
    if (resto === 10 || resto === 11) resto = 0;
    if (resto !== parseInt(cpf.substring(10, 11))) return false;

    return true;
}

function validar() {
    const email = document.getElementById('email').value;
    const cpf = document.getElementById('cpf').value;
    const emailErro = document.getElementById('emailErro');
    const cpfErro = document.getElementById('cpfErro');

    emailErro.innerText = validarEmail(email) ? '' : 'E-mail inválido!';
    cpfErro.innerText = validarCPF(cpf) ? '' : 'CPF inválido!';

    if (validarEmail(email) && validarCPF(cpf)) {
        document.getElementById('resultado').innerText = "E-mail e CPF são válidos!";
    } else {
        document.getElementById('resultado').innerText = "";
    }
}

Validar e-mail e CPF é uma parte crucial na construção de formulários robustos em JavaScript. A validação de e-mail pode ser facilmente feita usando expressões regulares, enquanto a validação de CPF exige um algoritmo para verificar os dígitos verificadores.

Dúvidas ou sugestões sobre como validar e-mail e CPF em JavaScript? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits

Tags: cpf email javascript