suchen

Heim  >  Artikel  >  Web-Frontend  >  Ausführliche Erklärung der Formularvalidierung in JavaScript_Grundkenntnisse

Ausführliche Erklärung der Formularvalidierung in JavaScript_Grundkenntnisse

WBOY
WBOYOriginal
2016-05-16 15:54:30952Durchsuche

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.

  1. Grundlegende Validierung – Zunächst muss das Formular überprüft werden, um sicherzustellen, dass für jedes seiner Formularfelder eine Dateneingabe erforderlich ist. Dadurch wird einfach jedes Feld der Tabelle durchlaufen und die Daten überprüft.
  2. Überprüfung des Datenformats – Zweitens müssen die eingegebenen Daten auf korrektes Format und korrekte Werte überprüft werden. Dies erfordert die Einführung weiterer Logik, um die Richtigkeit der Daten zu testen.

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>

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JavaScript AOP-Programmierbeispiele_Javascript-KenntnisseNächster Artikel：JavaScript AOP-Programmierbeispiele_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen