logo

Validierung von JavaScript-Formularen

  1. JavaScript-Formularvalidierung
  2. Beispiel einer JavaScript-Validierung
  3. JavaScript-E-Mail-Validierung

Es ist wichtig, das vom Benutzer übermittelte Formular zu validieren, da es unangemessene Werte enthalten kann. Daher ist eine Validierung zur Authentifizierung des Benutzers erforderlich.

JavaScript bietet die Möglichkeit, das Formular auf der Clientseite zu validieren, sodass die Datenverarbeitung schneller erfolgt als die serverseitige Validierung. Die meisten Webentwickler bevorzugen die JavaScript-Formularvalidierung.

Mithilfe von JavaScript können wir Name, Passwort, E-Mail, Datum, Mobiltelefonnummern und weitere Felder validieren.


Beispiel für die Validierung eines JavaScript-Formulars

In diesem Beispiel werden wir den Namen und das Passwort validieren. Der Name darf nicht leer sein und das Passwort darf nicht weniger als 6 Zeichen lang sein.

Hier validieren wir das Formular beim Absenden des Formulars. Erst wenn die angegebenen Werte korrekt sind, wird der Benutzer zur nächsten Seite weitergeleitet.

 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){>
Testen Sie es jetzt

Validierung des JavaScript-Passworts erneut eingeben

 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> 
Testen Sie es jetzt

Validierung der JavaScript-Nummer

Lassen Sie uns das Textfeld nur für numerische Werte validieren. Hier verwenden wir die Funktion 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> 
Testen Sie es jetzt

JavaScript-Validierung mit Bild

Sehen wir uns ein interaktives Beispiel für die Validierung eines JavaScript-Formulars an, das korrekte und falsche Bilder anzeigt, wenn die Eingabe richtig oder falsch ist.

 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){>
Testen Sie es jetzt

Ausgabe:

Name eingeben:
Passwort eingeben:

JavaScript-E-Mail-Validierung

Wir können die E-Mail mithilfe von JavaScript validieren.

Es gibt viele Kriterien, die befolgt werden müssen, um die E-Mail-ID zu validieren, wie zum Beispiel:

  • Die E-Mail-ID muss das @ und enthalten. Charakter
  • Vor und nach dem @ muss mindestens ein Zeichen stehen.
  • Nach müssen mindestens zwei Zeichen stehen. (Punkt).

Sehen wir uns das einfache Beispiel zur Validierung des E-Mail-Felds an.

 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>
Testen Sie es jetzt