É 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==''){ alert('Name can't be blank'); 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('password must be same!'); 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('numloc').innerHTML='Enter Numeric value only'; 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('@'); var dotposition=x.lastIndexOf('.'); 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