jQuery表单验证插件 --jQuery Validation Plugin - javascript

1、官方表单验证资料

插件下载: http://bassistance.de/jquery-plugins/jquery-plugin-validation/

插件文档:http://docs.jquery.com/Plugins/Validation

配置说明:http://docs.jquery.com/Plugins/Validation/validate#options

2、表单验证实例

实例一：精简验证，通过表单对象调用validate()方法进行验证，验证规则通过html标签属性定义：以下为常用属性定义距离

class='required'　　//必须字段
class='mail'　　//邮箱验证
class='url'　　//URL网址验证
class='date'　　//正确的日期格式满足 2012，0204，2012-02-04
class='number'　　//输入合法的数字
class='digits'　　//输入整数
minlength=''　　//最小输入长度
maxlength=''　　//最长输入长度(该值不会提示，当值达到一定字符数不可再增长)
max=''　　//输入的数值小于指定值
min=''　　//输入的数值大于指定值

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>jQuery PlugIn - 表单验证插件实例 Validate </title>
 5     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 6     <script type="text/javascript" src="jquery.js"></script>
 7     <script type="text/javascript" src="jquery.validate.min.js"></script>
 8     <script type="text/javascript" src="messages_cn.js"></script>
 9     <style type="text/css">
10     * { font-family: Verdana; font-size:13px; }
11     input[type='text']{width:200px;}
12     textarea{width:155px;}
13     label { width: 10em; float: left; }
14     label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
15     </style>
16     <script>
17     $(document).ready(function(){
18         $("#commentForm").validate();
19     });
20     </script>
21 </head>
22 <body>
23  <form id="commentForm" method="get" action="" >
24  <fieldset>
25    <legend>表单验证</legend>
26    <p><label>Name</label><input  name="name" class="required" maxlength="4" minlength="2"  /></p>
27    <p><label >E-Mail</label><input  name="email" class="required email" /></p>
28    <p><label >URL</label><input  name="url" class="url"/></p>
29    <p><label>text</label><textarea name="text" cols="22"  class="required"></textarea></p>
30    <p><input class="submit" type="submit" value="提交"/></p>
31  </fieldset>
32  </form>
33 </body>
34 </html>

实例二：方法验证，通过自定义表单规则来验证表单

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>jQuery PlugIn - 表单验证插件实例 Validate </title>
 5     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 6     <script type="text/javascript" src="jquery.js"></script>
 7     <script type="text/javascript" src="jquery.validate.min.js"></script>
 8     <script type="text/javascript" src="messages_cn.js"></script>
 9     <style type="text/css">
10     * { font-family: Verdana; font-size:13px; }
11     input[type='text']{width:200px;}
12     textarea{width:155px;}
13     .title{float:left;width:10em}
14     em.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
15     .field_notice{display:none;}
16     .checking{display:none;}
17     </style>
18     <script>
19     $(document).ready(function(){
20         $("#commentForm").validate({
21             errorPlacement: function(error, element){
22                 var error_td = element.next('em');
23                 error_td.find('.field_notice').hide();
24                 error_td.append(error);
25             },
26             success: function转载请注明：谷谷点程序 » jQuery表单验证插件 --jQuery Validation Plugin