Os usuários podem gerenciar facilmente a validação de formulário com a ajuda de JavaScript e expressões regulares. Os formulários são cruciais para trabalhar corretamente em qualquer site e gerenciar informações inválidas nos campos de forma é o trabalho do programador. Este artigo mostrará como criar um formulário e como colocar diferentes verificações de validação em diferentes campos de formulário com a ajuda do JavaScript.

Etapa 1: Configurando o documento HTML

Crie um novo documento HTML e digite as seguintes linhas dentro dele para criar um formulário:

Este é um exemplo de validação de formulário

Digite seu primeiro nome:

Digite seu endereço de e -mail

Digite seu contato sem#

Enviar!

Nas linhas acima:

• A A tag é usada para criar um formulário com o nome definido para validityform e o método está definido como "publicar". Além disso, a propriedade Onsubmit está definida como “Return FormSubmit ()” que executa esse método mediante envio e apenas envia o formulário se esse método retornar.
• Depois disso, basta usar

  tags para solicitar o usuário e Para tirar a entrada do usuário. Lembre -se de que cada tag de entrada tem um nome único.

• No final do formulário, crie um botão com o tipo definido como "enviar".

Se o documento HTML for carregado em um navegador da web, ele mostrará o seguinte:

A página da web pede o primeiro nome do usuário, endereço de e -mail e número de contato.

Etapa 2: Configurando o arquivo JavaScript

Em JavaScript, comece criando o FUNCTION FORMSUBMIT () com as seguintes linhas:

função formsubmit ()
// Todas as próximas linhas serão incluídas no corpo desta função

Depois disso, crie três variáveis ​​e armazene os valores dos três campos dentro deles usando as seguintes linhas:

var FirstName = documento.formas.validityform.nome.valor;
var conactNumber = documento.formas.validityform.e-mail.valor;
var emailadr = documento.formas.validityform.Tele.valor;

Nas linhas acima, o "documento" objeto foi usado para obter o “Formas” atributo, que foi usado ainda mais com o nome do formulário validityform Para acessar as tags de entrada com seus nomes dentro dele.

Depois disso, defina as expressões regulares para verificar a validade de cada campo com as seguintes linhas:

var emailRegex = /^\ w+([\.-]?\ w+)*@\ w+([\.-]?\ w+)*(\.\ w 2,3)+$/g;
var teleregex = /^\ d 10 $ /;
var nameregex = /\ d+$ /g;

Nas linhas acima:

• EmailRegex verifica um endereço de e -mail válido com @ incluindo e até permite um ponto “.”E um hífen
• Teleregex Verifica apenas caracteres numéricos com comprimento máximo de entrada para 10
• nameregex Verifica qualquer caractere ou números especiais dentro do campo Nome

Depois disso, compare as três expressões regulares com seus respectivos valores de campo de texto com a ajuda de declarações IF e, se algum campo for inválido, basta retornar e alertar o usuário, pois tudo isso usa as seguintes linhas:

if (primeironame == "" || nameregex.teste (primeiro nome))
janela.alerta ("primeiro nome inválido");
retorna falso;

if (emailadr == "" || !EmailRegex.teste (emailadr))
janela.Alert ("Por favor, insira um endereço de e-mail válido.");
retorna falso;

if (conactNumber == "" || !Teleregex.teste (conactNumber))
alerta ("número de telefone inválido");
retorna falso;

Depois disso, solicite ao usuário que as entradas foram válidas e retorne o valor como verdadeiro:

alerta ("formulário enviado com informações corretas");
retornar true;

O código JavaScript completo é como:

functionFormSubMit ()
var FirstName = documento.formas.validityform.nome.valor;
var conactNumber = documento.formas.validityform.e-mail.valor;
var emailadr = documento.formas.validityform.Tele.valor;
var emailRegex = /^\ w+([\.-]?\ w+)*@\ w+([\.-]?\ w+)*(\.\ w 2,3)+$/g;
var teleregex = /^\ d 10 $ /;
var nameregex = /\ d+$ /g;
if (primeironame == "" || nameregex.teste (primeiro nome))
janela.alerta ("primeiro nome inválido");
retorna falso;

if (emailadr == "" || !EmailRegex.teste (emailadr))
janela.Alert ("Por favor, insira um endereço de e-mail válido.");
retorna falso;

if (conactNumber == "" || !Teleregex.teste (conactNumber))
alerta ("número de telefone inválido");
retorna falso;

alerta ("formulário enviado com informações corretas");
returnTrue;

Etapa 3: testando a validação do formulário

Execute o funcionamento da validação do formulário executando o documento HTML e digitando dados nos campos de entrada. Forneça um nome inválido com caracteres ou números especiais dentro dele

A página da web levou ao usuário que o nome era inválido.

Tente novamente com o nome correto e o endereço de email incorreto:

O usuário foi alertado de que o endereço de e -mail não é válido.

Depois disso, tente com um nome válido e endereço de e -mail válido, mas com um número de contato inválido, como:

A página da web levou ao usuário que o número de contato não é válido.

Depois disso, para o teste final, forneça todas as informações corretas, como:

Com todas as informações corretas fornecidas, a validação do formulário é bem -sucedida e o aplicativo da web pode avançar.

Conclusão

A validação do formulário pode ser implementada em um formulário HTML com JavaScript, expressões regulares e um pouco de construção lógica. Expressões regulares podem definir a entrada aceita correta para um campo. Depois disso, a expressão regular pode ser comparada com o valor do respectivo campo de entrada usando o método test (). Isso vale para outros tipos de campos de entrada também, pode ser para endereço, código postal ou nome do país.