- HTML中文网
- 联系QQ:18840023
- QQ交流群
- 微信公众号
表单验证通常在客户机输入所有必要的数据,然后按下提交按钮后在服务器上进行。如果客户机输入的数据不正确或丢失了,服务器必须将所有数据发送回客户机,并请求用正确的信息重新提交表单。这是一个漫长的过程,过去常常给服务器带来很大的负担。
Javascript提供了一种在将表单数据发送到Web服务器之前在客户端计算机上验证表单数据的方法。表单验证通常执行两个功能:
例
我们将举例说明验证过程。这是一个简单的html格式表单。
<!DOCTYPE html> <html> <meta charset="UTF-8"> <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">姓名</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">邮政编码</td> <td><input type = "text" name = "Zip" /></td> </tr> <tr> <td align = "right">国家</td> <td> <select name = "Country"> <option value = "-1" selected>[选择你的]</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 = "提交" /></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>
推荐手册