支付宝赞助帐号:service@kuitao8.com 

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

Created2013-10-30   Views 1709    Author 懒人程序
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(label){
27                 label.addClass('validate_right').text('OK!');
28             },
29             onkeyup: false,
30             rules: {
31                 name: {
32                     required:true,
33                     minlength:3,
34                     maxlength:40,
35                     remote:{
36                         url :'index.php?ajax=1',
37                         type:'get',
38                         data:{
39                             name : function(){
40                                 return $('#name').val();
41                             }
42                         },
43                         beforeSend:function(){
44                             var _checking = $('#checking');
45                             _checking.prev('.field_notice').hide();
46                             _checking.next('label').hide();
47                             $(_checking).show();
48                         },
49                         complete :function(){
50                             $('#checking').hide();
51                         }
52                     }
53                 },
54                 email: {required: true, email: true },
55                 url:{required:true,url:true},
56                 text:"required"
57             },
58             messages: {
59                 name: {required:"需要输入名称", minlength:"名称长度在3-40个字符之间", maxlength:"名称长度在3-40个字符之间",remote:"用户名已存在"},
60                 email: {required:"需要输入电子邮箱", email:"电子邮箱格式不正确"},
61                 url: {required:"需要输入URL地址", url:"URL地址格式不正确"},
62                 text:"需要输入文本内容"
63             },
64         });
65     });
66     </script>
67 </head>
68 <body>
69  <form id="commentForm" method="get" action="" >
70  <fieldset>
71    <legend>表单验证</legend>
72    <p><label class="title" >Name</label><input  id="name" name="name"/>
73         <em><label class="field_notice"></label><label id="checking" class="checking">检查中...</label></em>
74    </p>
75    <p><label class="title"  >E-Mail</label><input  name="email"/>
76         <em><label class="field_notice"></label></em>
77    </p>
78    <p><label class="title" >URL</label><input  name="url"/>
79         <em><label class="field_notice"></label></em>
80    </p>
81    <p><label class="title" >text</label><textarea name="text" cols="22"></textarea>
82         <em><label class="field_notice"></label></em>
83    </p>
84    <p><input class="submit" type="submit" value="提交"/></p>
85  </fieldset>
86  </form>
87 </body>
88 </html>

 

上一篇: 《javascript设计模式》总结——门面模式、适配器模式
下一篇: 禁止网页复制的代码
支持键盘 ← →

邮件订阅

订阅我们的精彩内容