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>