Validação de Formulários HTML com JavaScript e Regex

Posted on Apr 29, 2025 in Computer Engineering in Computer Engineering

Validação com Expressões Regulares (Regex)

Validar Apenas Números

Expressão regular para checar se o campo possui apenas números.

function validaApenasNumero() {
  var regex = /^\d+$/;
  var value = document.getElementById("name1").value;
  if (regex.test(value)) {
    alert("Correto");
    return;
  }
  alert("Errado");
  return;
}

Nome: Ok

Validar Apenas Letras

Expressão regular para checar se o campo possui apenas letras.

function validaApenasLetras(){
  var regex = /^[a-zA-Z]+$/;
  // Corrigido: A linha abaixo estava incorreta, separando a declaração da regex da obtenção do valor.
  var value = document.getElementById("name2").value;
  if (regex.test(value)){
    alert("Correto");
    return;
  }
  alert("Errado");
  return;
}

Nome: Ok

Validar Quantidade Específica de Números

Expressão regular para checar se o campo possui exatamente 3 números.

function validaNumeroComTamanhoFixo() {
  var regex = /^\d{3}$/;
  var value = document.getElementById("name3").value;
  if (regex.test(value)) {
    alert("Correto");
    return;
  }
  alert("Errado");
  return;
}

Nome: Ok

Validar Quantidade Específica de Letras

Expressão regular para checar se o campo possui exatamente 3 letras.

function validaLetrasComTamanhoFixo() {
  var regex = /^[a-zA-Z]{3}$/;
  var value = document.getElementById("name4").value;
  if (regex.test(value)) {
    alert("Correto");
    return;
  }
  alert("Errado");
  return;
}

Nome: Ok

Validação Genérica de Campo Vazio

Validação no Evento onFocus (Passando o Input)

Função para verificar se um campo está vazio, recebendo o próprio elemento input como parâmetro.

function validarCampoInput(input) {
  var value = input.value;
  if (value == null || value == "") {
    alert("Campo não pode ser vazio!"); // Exemplo de feedback
    return false;
  }
  return true;
}

Nome:
Idade:

Validação no Evento onSubmit (Passando o Formulário)

Função para verificar se um campo específico (‘name’) dentro de um formulário está vazio, recebendo o formulário como parâmetro. Geralmente usada com <form onSubmit="return validarCampoForm(this);">.

function validarCampoForm(form) {
  var value = form['name'].value;
  if (value == null || value == "") {
    alert("Campo 'Nome' não pode ser vazio!"); // Exemplo de feedback
    return false; // Impede o envio do formulário
  }
  return true; // Permite o envio do formulário
}

Nome:

Validação Usando getElementById

Função para verificar se um campo específico (com id ‘name’) está vazio, buscando o elemento pelo ID.

function validarCampoPorId() {
  var value = document.getElementById("name").value;
  if (value == null || value == "") {
    alert("Campo 'Nome' não pode ser vazio!"); // Exemplo de feedback
    return false;
  }
  return true;
}

Nome: Verificar