Como fazer uma simples validação com javascript

Neste tutorial, vou mostrar como validar campos de texto, número e e-mail usando #JavaScript puro.

1. Validação de Campo de Texto

Para validar um #campo de #texto (por exemplo, nome completo), queremos verificar se:

• Não está vazio

• Tem um comprimento mínimo

• Não contém números ou caracteres especiais

function validarTexto(texto) {
    // Verifica se está vazio
    if (texto.trim() === '') {
        return 'O campo não pode estar vazio';
    }
    
    // Verifica comprimento mínimo (por exemplo, 3 caracteres)
    if (texto.length < 3) {
        return 'O texto deve ter pelo menos 3 caracteres';
    }
    
    // Verifica se contém apenas letras e espaços
    const regex = /^[a-zA-ZÀ-ÿ\s]+$/;
    if (!regex.test(texto)) {
        return 'O texto deve conter apenas letras';
    }
    
    return ''; // Retorna vazio se a validação passar
}

2. Validação de Campo Numérico

Para validar números (como idade ou quantidade), queremos verificar:

• Se é realmente um número

• Se está dentro de um intervalo válido

function validarNumero(numero, min = 0, max = 100) {
    // Verifica se é um número válido
    if (isNaN(numero) || numero === '') {
        return 'Por favor, insira um número válido';
    }
    
    // Converte para número (importante se vier de um input text)
    const num = Number(numero);
    
    // Verifica intervalo
    if (num < min || num > max) {
        return `O número deve estar entre ${min} e ${max}`;
    }
    
    return ''; // Retorna vazio se a validação passar
}

3. Validação de Campo de E-mail

Para validar e-mails, usamos uma expressão regular (regex) que verifica o formato básico:

function validarEmail(email) {
    // Verifica se está vazio
    if (email.trim() === '') {
        return 'O e-mail não pode estar vazio';
    }
    
    // Expressão regular para validar e-mail
    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    
    if (!regex.test(email)) {
        return 'Por favor, insira um e-mail válido';
    }
    
    return ''; // Retorna vazio se a validação passar
}

4. Implementação Prática com HTML

Aqui está um exemplo de como usar essas funções com um formulário HTML:

<form id="meuFormulario">
    <div>
        <label for="nome">Nome:</label>
        <input type="text" id="nome">
        <span id="erroNome" class="erro"></span>
    </div>
    
    <div>
        <label for="idade">Idade:</label>
        <input type="number" id="idade">
        <span id="erroIdade" class="erro"></span>
    </div>
    
    <div>
        <label for="email">E-mail:</label>
        <input type="email" id="email">
        <span id="erroEmail" class="erro"></span>
    </div>
    
    <button type="submit">Enviar</button>
</form>

<script>
    document.getElementById('meuFormulario').addEventListener('submit', function(event) {
        event.preventDefault(); // Evita o envio do formulário
        
        // Obtém os valores
        const nome = document.getElementById('nome').value;
        const idade = document.getElementById('idade').value;
        const email = document.getElementById('email').value;
        
        // Valida os campos
        const erroNome = validarTexto(nome);
        const erroIdade = validarNumero(idade, 1, 120);
        const erroEmail = validarEmail(email);
        
        // Exibe os erros
        document.getElementById('erroNome').textContent = erroNome;
        document.getElementById('erroIdade').textContent = erroIdade;
        document.getElementById('erroEmail').textContent = erroEmail;
        
        // Se não houver erros, envia o formulário
        if (!erroNome && !erroIdade && !erroEmail) {
            this.submit();
        }
    });
</script>

Validação em tempo real: Você pode usar o evento input para validar enquanto o usuário digita:

document.getElementById('email').addEventListener('input', function() {
    const erro = validarEmail(this.value);
    document.getElementById('erroEmail').textContent = erro;
});

Adicione CSS para destacar os campos inválidos:

.erro {
    color: red;
    font-size: 0.8em;
}

input.invalido {
    border: 1px solid red;
}

Validação HTML5: Use os atributos nativos como complemento:

<input type="email" required minlength="3" max="120">

Estas são apenas dicas básicas inicias para uma simples validação de dados. É importante mantes validações extras como validação do lado servidor.