logo

Validação de formulário JavaScript

  1. Validação de formulário JavaScript
  2. Exemplo de validação JavaScript
  3. Validação de e-mail JavaScript

É importante validar o formulário enviado pelo usuário pois pode conter valores inadequados. Portanto, a validação é necessária para autenticar o usuário.

JavaScript fornece facilidade para validar o formulário no lado do cliente para que o processamento de dados seja mais rápido do que a validação no lado do servidor. A maioria dos desenvolvedores web prefere a validação de formulário JavaScript.

Através do JavaScript podemos validar nome, senha, email, data, números de celular e mais campos.


Exemplo de validação de formulário JavaScript

Neste exemplo vamos validar o nome e a senha. O nome não pode estar vazio e a senha não pode ter menos de 6 caracteres.

Aqui, estamos validando o formulário no envio do formulário. O usuário não será encaminhado para a próxima página até que os valores fornecidos estejam corretos.

 function validateform(){ var name=document.myform.name.value; var password=document.myform.password.value; if (name==null || name==&apos;&apos;){ alert(&apos;Name can&apos;t be blank&apos;); return false; }else if(password.length<6){ 6 alert('password must be at least characters long.'); return false; } name: <br> Password: <br> </6){>
Teste agora

Validação de senha de redigitação de JavaScript

 function matchpass(){ var firstpassword=document.f1.password.value; var secondpassword=document.f1.password2.value; if(firstpassword==secondpassword){ return true; } else{ alert(&apos;password must be same!&apos;); return false; } } Password: <br> Re-enter Password: <br> 
Teste agora

Validação de número JavaScript

Vamos validar o campo de texto apenas para valores numéricos. Aqui, estamos usando a função isNaN().

 function validate(){ var num=document.myform.num.value; if (isNaN(num)){ document.getElementById(&apos;numloc&apos;).innerHTML=&apos;Enter Numeric value only&apos;; return false; }else{ return true; } } Number: <span id="numloc"></span> <br> 
Teste agora

Validação JavaScript com imagem

Vamos ver um exemplo interativo de validação de formulário JavaScript que exibe imagens corretas e incorretas se a entrada estiver correta ou incorreta.

 function validate(){ var name=document.f1.name.value; var password=document.f1.password.value; var status=false; if(name.length<1){ document.getelementbyid('nameloc').innerhtml="  Please enter your name" ; status="false;" }else{ } if(password.length<6){ document.getelementbyid('passwordloc').innerhtml="  Password must be at least 6 char long" return status; <table class="table"> <tr><td>Enter Name:</td><td> <span id="nameloc"></span></td></tr> <tr><td>Enter Password:</td><td> <span id="passwordloc"></span></td></tr> <tr><td></td></tr>  </1){>
Teste agora

Saída:

Govinda
Insira o nome:
Digite a senha:

Validação de e-mail JavaScript

Podemos validar o email com a ajuda de JavaScript.

Existem muitos critérios que precisam ser seguidos para validar o ID do e-mail, como:

  • O ID de e-mail deve conter @ e . personagem
  • Deve haver pelo menos um caractere antes e depois do @.
  • Deve haver pelo menos dois caracteres depois de . (ponto).

Vejamos o exemplo simples para validar o campo email.

 function validateemail() { var x=document.myform.email.value; var atposition=x.indexOf(&apos;@&apos;); var dotposition=x.lastIndexOf(&apos;.&apos;); if (atposition<1 || dotposition="x.length){" alert('please enter a valid e-mail address 
 atpostion:'+atposition+'
 dotposition:'+dotposition); return false; } email: <br> </1>
Teste agora