表单验证用于发生在服务器，客户端已经输入所有必要的数据，然后按下提交按钮之后。如果一些已被输入的客户端的数据的已在错误形式或者被简单地丢失，则服务器将必须的所有数据发送回客户端，并请求的形式以正确的信息重新提交。这是一个漫长的过程，会增加服务器负担。
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>新闻热点
疑难解答
