表單驗證用於發生在伺服器,用戶端已經輸入所有必要的數據,然後按下提交按鈕之後。如果一些已輸入的客戶端的資料的已在錯誤形式或簡單地遺失,則伺服器將必須的所有資料傳送回客戶端,並請求的形式以正確的資訊重新提交。這是一個漫長的過程,會增加伺服器負擔。
JavaScript中,提供了一種方法將其傳送到web伺服器之前驗證客戶端的電腦上的形式的資料。表單驗證通常執行兩種方式。
我們將舉一個例子來了解驗證的過程。下面是簡單的形式進行:
<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>
基本表單驗證:
首先,我們將展示如何做一個基本的表單驗證。在上面的表格要求validate()函數來驗證資料在onsubmit事件發生。以下是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>
資料格式驗證:
現在,我們將看到我們如何將其提交到Web伺服器之前,驗證我們輸入的表單資料。
這個例子說明如何驗證輸入的電子郵件地址,這意味著電子郵件地址必須至少包含一個@符號和一個點(.)。此外,@絕不能是電子郵件地址的第一個字符,最後點必須在@符號後面的一個字符:
<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>