表單驗證用于發生在服務器，客戶端已經輸入所有必要的數據，然后按下提交按鈕之后。如果一些已被輸入的客戶端的數據的已在錯誤形式或者被簡單地丟失，則服務器將必須的所有數據發送回客戶端，并請求的形式以正確的信息重新提交。這是一個漫長的過程，會增加服務器負擔。
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>新聞熱點
疑難解答
