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.