Validação do formulário JavaScript
A validação do formulário é a parte básica e mais importante do processo de desenvolvimento da Web. Geralmente, a validação do formulário é feita no lado do servidor. A validação do formulário ajuda a mostrar mensagens de erro ao usuário se houver algum dados desnecessários ou errados, ou um campo necessário é deixado vazio. Se o servidor encontrar algum erro, ele revolverá esse erro; Em seguida, mostramos a mensagem de erro ao usuário. Mas, podemos usar o JavaScript no front-end para validar os dados do formulário e mostrar erros imediatamente. Neste artigo, aprenderemos a validação básica de formulário em JavaScript. Então, vamos direto aos exemplos e ver como podemos fazer isso em javascript.
Exemplos
Primeiro de tudo, assumimos um formulário com o nome de "TestForm", no qual temos um campo de entrada com o rótulo "Nome de usuário" e um tipo de entrada submetido em nosso arquivo HTML. Na etiqueta de forma, criamos um evento onSubmit, no qual estamos fazendo fechamento e retornando uma função validatefunc ().
No arquivo de script, escreveremos a definição de função de validatefunc (), que será executada toda vez que o usuário acertar o botão de envio. Nessa função, validaremos o campo de entrada do nome de usuário. Supomos que queremos validar o campo de nome de usuário está vazio ou não quando o usuário acertar o botão Enviar.
Então, para validar o campo de nome de usuário. Primeiro atribuímos uma variável ao documento.TestForm, apenas para dar uma aparência limpa e compreensível ao código. Então, na definição da função, escreveremos o código para validação. Escreveremos uma declaração if para verificar o campo de formulário vazio. Se o campo de nome de usuário estiver vazio, mostraremos uma caixa de alerta para mostrar o erro, focar no campo de nome de usuário novamente e retornar false para que o formulário não seja enviado. Caso contrário, se ele passar o cheque e os dados forem validados, retornaremos verdadeiro à função.
var theform = document.testForm;// Código de validação do formulário
função validationfunc ()
if (theform.nome.valor == "")
alerta ("nome está vazio");
a forma.nome.foco();
retorna falso;
retornar (true);
Depois de escrever todo esse código. Se executarmos o código e clicarmos no botão Enviar sem escrever nada no campo do formulário.
Como você pode observar na captura de tela anexada abaixo, ele lança um erro na caixa de alerta.
Este é um exemplo muito básico, porém bom, para começar a implementar a validação do formulário. Para uma implementação adicional, como várias validações de formulário ou você deseja fazer uma verificação no comprimento do personagem também.
Para esse fim, primeiro supomos dois campos de forma na tag de formulário com o rótulo de "email" e "senha" em nosso arquivo html.
Para validação em JavaScript, colocaremos novamente uma instrução IF para validação dos campos de formulário de email e senha na definição de função do arquivo de script. Suponha que queremos aplicar várias validações no campo de email como o campo não deve estar vazio, e seu comprimento não deve ser inferior a 10 caracteres. Então, podemos usar ou “||” na declaração IF. Se ocorrer algum desses erros, ele mostrará uma caixa de alerta com a mensagem de erro que queremos mostrar, concentre -se no campo do formulário de email e retornará falsa à função. Da mesma forma, se queremos aplicar a verificação do comprimento do personagem no campo de senha, podemos fazê -lo.
var theform = document.testForm;// Código de validação do formulário
função validationfunc ()
if (theform.nome.valor == "")
alerta ("nome está vazio");
a forma.nome.foco();
retorna falso;
if (theform.e-mail.valor == "" || a forma.e-mail.valor.comprimento < 10)
alerta ("email é inadequado");
a forma.e-mail.foco();
retorna falso;
if (theform.senha.valor.comprimento < 6)
alerta ("a senha deve ter 6 caracteres");
a forma.senha.foco();
retorna falso;
retornar (true);
Depois de escrever todo esse código, recarregue a página para ter um código atualizado. Agora, deixamos um campo de e -mail vazio ou escrevemos um e -mail com menos de 10 caracteres. Nos dois casos, ele mostrará um erro "email é inadequado".
Então, é assim que podemos aplicar a validação básica do formulário em JavaScript. Também podemos aplicar a validação de dados no lado do cliente usando regex ou escrevendo nossa própria função personalizada. Suponha que queremos aplicar a validação de dados no campo de e -mail. O regex seria assim para validar um email.
if (/^[a-za-z0-9.!#$%& '*+/=?^_ '| ~-]+@[a-za-z0-9-]+(?: \.[A-ZA-Z0-9-]+)*$/.teste (TheForm.e-mail.valor))
alerta ("email é inadequado");
a forma.e-mail.foco() ;
retorna falso;
Esta foi apenas uma demonstração básica de validação de dados usando regex. Mas, o céu está aberto para você voar.
Conclusão
Este artigo abrange a validação básica de formulário em JavaScript. Também tentamos e tivemos um sneak na validação de dados usando regex. Se você quiser saber mais sobre Regex, temos um artigo dedicado relacionado a Regex no Linuxhint.com. Para aprender e entender os conceitos de JavaScript e conteúdo mais útil como esse, continue visitando Linuxhint.com. Obrigado!