logo

TechCodeview

Ověření formuláře JavaScript

  1. Ověření formuláře JavaScript
  2. Příklad ověření JavaScriptu
  3. JavaScript ověření e-mailu

Je důležité ověřit formulář odeslaný uživatelem, protože může mít nevhodné hodnoty. Pro ověření uživatele je tedy nutné ověření.

JavaScript poskytuje možnost ověřit formulář na straně klienta, takže zpracování dat bude rychlejší než ověření na straně serveru. Většina webových vývojářů preferuje ověřování formulářů JavaScriptem.

Prostřednictvím JavaScriptu můžeme ověřit jméno, heslo, e-mail, datum, mobilní čísla a další pole.

Příklad ověření formuláře JavaScript

V tomto příkladu ověříme jméno a heslo. Jméno nesmí být prázdné a heslo nesmí být kratší než 6 znaků.

Zde ověřujeme formulář při odeslání formuláře. Uživatel nebude přesměrován na další stránku, dokud nebudou zadané hodnoty správné.

 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){>
Otestujte to hned

Ověření nového hesla JavaScriptu

 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>
Otestujte to hned

Ověření čísla JavaScript

Ověřte textové pole pouze pro číselnou hodnotu. Zde používáme funkci 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>
Otestujte to hned

Ověření JavaScriptu s obrázkem

Podívejme se na interaktivní příklad ověření formuláře JavaScript, který zobrazuje správný a nesprávný obrázek, pokud je vstup správný nebo nesprávný.

 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){>
Otestujte to hned

Výstup:

Napište jméno:
Zadejte heslo:

JavaScript ověření e-mailu

E-mail můžeme ověřit pomocí JavaScriptu.

Existuje mnoho kritérií, která je třeba dodržovat, aby bylo možné ověřit e-mailové ID, například:

  • ID e-mailu musí obsahovat @ a . charakter
  • Před a za @ musí být alespoň jeden znak.
  • Za znakem musí být alespoň dva znaky. (tečka).

Podívejme se na jednoduchý příklad ověření pole e-mailu.

 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>
Otestujte to hned