logo

Validatie van JavaScript-formulier

  1. Validatie van JavaScript-formulieren
  2. Voorbeeld van JavaScript-validatie
  3. JavaScript e-mailvalidatie

Het is belangrijk om het door de gebruiker ingediende formulier te valideren, omdat het ongepaste waarden kan bevatten. Validatie is dus vereist om de gebruiker te authenticeren.

JavaScript biedt de mogelijkheid om het formulier aan de clientzijde te valideren, zodat de gegevensverwerking sneller zal verlopen dan validatie op de server. De meeste webontwikkelaars geven de voorkeur aan JavaScript-formuliervalidatie.

Via JavaScript kunnen we naam, wachtwoord, e-mailadres, datum, mobiele nummers en meer velden valideren.


Voorbeeld van JavaScript-formuliervalidatie

In dit voorbeeld gaan we de naam en het wachtwoord valideren. De naam mag niet leeg zijn en het wachtwoord mag niet minder dan zes tekens lang zijn.

Hier valideren we het formulier bij het indienen van het formulier. De gebruiker wordt pas doorgestuurd naar de volgende pagina als de opgegeven waarden correct zijn.

 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){>
Test het nu

JavaScript Wachtwoordvalidatie opnieuw typen

 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> 
Test het nu

JavaScript-nummervalidatie

Laten we het tekstveld alleen valideren voor numerieke waarden. Hier gebruiken we de isNaN()-functie.

 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> 
Test het nu

JavaScript-validatie met afbeelding

Laten we een interactief JavaScript-formuliervalidatievoorbeeld bekijken dat de juiste en onjuiste afbeelding weergeeft als de invoer juist of onjuist is.

 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){>
Test het nu

Uitgang:

Voer naam in:
Voer wachtwoord in:

JavaScript e-mailvalidatie

We kunnen de e-mail valideren met behulp van JavaScript.

Er zijn veel criteria die moeten worden gevolgd om de e-mail-ID te valideren, zoals:

  • e-mail-ID moet de @ en . karakter
  • Er moet minstens één teken voor en na de @ staan.
  • Er moeten minimaal twee tekens achter staan. (punt).

Laten we het eenvoudige voorbeeld bekijken om het e-mailveld te valideren.

 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>
Test het nu