JavaScript-Validierung

JavaScript kann verwendet werden, um Daten in den HTML-Dokumenten zu validieren, bevor der Inhalt an den Server gesendet wird. Die Validierung erfolgt serverseitig, wenn der Client die Daten erfolgreich eingegeben und auf die Schaltfläche „Senden“ geklickt hat.

Wir können die Validierung für einige Felder verwenden, wie zum Beispiel:

  • um zu prüfen, ob das erforderliche Feld leer ist?
  • um zu überprüfen, ob der Benutzer eine gültige E-Mail-Adresse eingegeben hat.
  • um zu prüfen, ob der Benutzer ein gültiges Datum eingegeben hat.
  • um zu überprüfen, ob der Benutzer Text in ein numerisches Feld eingegeben hat.

JavaScript-Validierungssyntax

function validate()
{
   var value;
   if(value==null || value=" ")
   {
      alert(msg);
      return fasle;
   }
   else
   {
      return true;
   }
}

Beispiel für eine JavaScript-Validierung

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>validation</title>

<script type="text/javascript">
	function validate() {
		var a = document.forms("myform")("fname").value
		if (a == null || a == "") {
			alert("Please enter the Name..!");
			return false;
		} else {
			alert("Successful validation...!");
		}
	}
</script>
</head>
<body>
	<form name="myform">
		Enter Name: <input Type="text" name="fname" />
		<input type="button" onclick="validate();" value="submit" />

	</form>
</body>
</html>
  • var a = document.forms(“myform”)(“fname”).value Diese Zeile erstellt eine Variable, die den gleichen Wert wie der fname-Wert hat.
  • Wenn die Zeile (a == null || a == „“) ein ODER-Zeichen enthält, das angibt, ob der Wert null oder leer ist, wird die Warnmeldung angezeigt. Wenn das Eingabefeld leer ist, wird „false“ zurückgegeben.
  • Wenn der Wert null ist und nicht deklariert ist, wird ein Warnfeld mit der Meldung „Bitte geben Sie den Namen ein“ angezeigt. Wenn der Wert als Wert eingegeben wird, wird eine erfolgreiche Validierung angezeigt.
  • -Tag enthält das Submit-Ereignis, wenn der Benutzer auf die Schaltfläche „Senden“ klickt, und der onclick()-Mausereignishandler wird ausgelöst, wenn der Benutzer einmal auf die Maustaste klickt.

Demo zur JavaScript-Validierung

  • Speichern Sie die Datei als validation_example.html in Ihrem System.
  • Öffnen Sie einfach die Datei im Browser. Sie sehen das folgende Bild im Browser. Beachten Sie, dass der Browser die HTML5-Spezifikation unterstützen muss.

Geben Sie nun keinen Wert ein und klicken Sie auf die Schaltfläche „Senden“. Die folgende Warnmeldung wird angezeigt:

JS-Validierung1

Geben Sie nun einen Namen ein und klicken Sie auf die Schaltfläche „Senden“. Die folgende Ausgabe erscheint:
JS-Validierung2

JavaScript-E-Mail-Validierung

Das folgende Beispiel zeigt die JavaScript-E-Mail-Validierung.

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>mail_validation</title>
<script>

function validate()
{
var a=document.forms("myform")("email").value;
var atpos=a.indexOf("@");
var dotpos=a.lastIndexOf(".");
if(atpos<1 || dotpos<atpos+2 || dotpos+2>=a.length)
{
	alert("Invalid email address");
	return false;
}
else {
	alert("Valid email address..!");
}
}
</script>
</head>
<body>
	<form name="myform" action="">
		Enter email: <input type="text" name="email" />
		<input type="button" onclick="validate();" value="submit" />
	</form>
</body>
</html>
  • var a = document.forms(“myform”)(“email”).value Diese Zeile erstellt eine Variable, die den gleichen Wert wie der E-Mail-Wert hat.
  • var atpos=a.indexOf(“@”); die eine eingebaute Funktion namens indexOf() enthalten, die den Text für uns durchsucht. Es wird verwendet, um zu überprüfen, ob E-Mails ein @-Zeichen enthalten.
  • var dotpos=a.lastIndexOf(“.”); die eine integrierte Funktion namens lastIndexOf() enthält, die nach einem Punkt am Ende einer E-Mail-ID wie .com sucht.
  • Die Zeile if(atpos<1 || dotpos=a.length) gibt an, dass für atpos<1 mindestens ein Zeichen vor der E-Mail-Adresse vorhanden sein muss, für dotpos
  • -Tag enthält das Submit-Ereignis, wenn der Benutzer auf die Schaltfläche „Senden“ klickt, und der onclick()-Mausereignishandler wird ausgelöst, wenn der Benutzer einmal auf die Maustaste klickt.

Beispielanwendungstest

  • Speichern Sie die Datei als mailValidation_example.html in Ihrem System.
  • Öffnen Sie einfach die Datei im Browser. Sie sehen das folgende Bild im Browser. Beachten Sie, dass der Browser die HTML5-Spezifikation unterstützen muss.

Geben Sie nun keinen Wert ein und klicken Sie auf die Schaltfläche „Senden“. Die folgende Warnmeldung wird angezeigt:

js_validation3

Geben Sie nun einen Namen ein und klicken Sie auf die Schaltfläche „Senden“. Die folgende Ausgabe erscheint:
js_validation4

Geben Sie nun eine gültige E-Mail-Adresse ein und klicken Sie auf die Schaltfläche „Senden“. Es erscheint die folgende Ausgabe:
js_validation5

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen