Die Formularvalidierung erfolgt auf dem Server, nachdem der Client alle erforderlichen Daten eingegeben und dann auf die Schaltfläche „Senden“ geklickt hat. Wenn einige der vom Client eingegebenen Daten in der falschen Form vorliegen oder einfach fehlen, muss der Server alle Daten an den Client zurücksenden und eine erneute Übermittlung des Formulars mit den korrekten Informationen anfordern. Dies ist ein langwieriger Prozess, der die Belastung des Servers erhöht.
JavaScript bietet eine Möglichkeit, Formulardaten auf dem Computer des Kunden zu validieren, bevor sie an den Webserver gesendet werden. Die Formularvalidierung wird normalerweise auf zwei Arten durchgeführt.
Wir geben ein Beispiel, um den Verifizierungsprozess zu verstehen. Das Folgende ist eine einfache Form:
<html>
<head>
<title>Form Validation</title>
<script type="text/javascript">
<!--
// Form validation code will come here.
//-->
</script>
</head>
<body>
<form action="/cgi-bin/test.cgi" name="myForm"
onsubmit="return(validate());">
<table cellspacing="2" cellpadding="2" border="1">
<tr>
<td align="right">Name</td>
<td><input type="text" name="Name" /></td>
</tr>
<tr>
<td align="right">EMail</td>
<td><input type="text" name="EMail" /></td>
</tr>
<tr>
<td align="right">Zip Code</td>
<td><input type="text" name="Zip" /></td>
</tr>
<tr>
<td align="right">Country</td>
<td>
<select name="Country">
<option value="-1" selected>[choose yours]</option>
<option value="1">USA</option>
<option value="2">UK</option>
<option value="3">INDIA</option>
</select>
</td>
</tr>
<tr>
<td align="right"></td>
<td><input type="submit" value="Submit" /></td>
</tr>
</table>
</form>
</body>
</html>
Grundlegende Formularvalidierung:
Zuerst zeigen wir Ihnen, wie Sie eine grundlegende Formularvalidierung durchführen. Die obige Tabelle erfordert die Funktion „validate()“, um die Daten zu validieren, bevor das onsubmit-Ereignis auftritt. Im Folgenden finden Sie die Implementierung der Funktion „validate()“:
<script type="text/javascript">
<!--
// Form validation code will come here.
function validate()
{
if( document.myForm.Name.value == "" )
{
alert( "Please provide your name!" );
document.myForm.Name.focus() ;
return false;
}
if( document.myForm.EMail.value == "" )
{
alert( "Please provide your Email!" );
document.myForm.EMail.focus() ;
return false;
}
if( document.myForm.Zip.value == "" ||
isNaN( document.myForm.Zip.value ) ||
document.myForm.Zip.value.length != 5 )
{
alert( "Please provide a zip in the format #####." );
document.myForm.Zip.focus() ;
return false;
}
if( document.myForm.Country.value == "-1" )
{
alert( "Please provide your country!" );
return false;
}
return( true );
}
//-->
</script>
Überprüfung des Datenformats:
Jetzt werden wir sehen, wie wir die von uns eingegebenen Formulardaten validieren, bevor wir sie an den Webserver übermitteln.
Dieses Beispiel zeigt, wie eine eingegebene E-Mail-Adresse validiert wird. Das bedeutet, dass die E-Mail-Adresse mindestens ein @-Symbol und einen Punkt (.) enthalten muss. Außerdem darf @ nicht das erste Zeichen der E-Mail-Adresse sein und der letzte Punkt muss ein Zeichen nach dem @-Symbol stehen:
<script type="text/javascript">
<!--
function validateEmail()
{
var emailID = document.myForm.EMail.value;
atpos = emailID.indexOf("@");
dotpos = emailID.lastIndexOf(".");
if (atpos < 1 || ( dotpos - atpos < 2 ))
{
alert("Please enter correct email ID")
document.myForm.EMail.focus() ;
return false;
}
return( true );
}
//-->
</script>
