jquery.validate使用笔记

　　jquery.validate是一个基于jquery的非常优秀的验证框架，我们可以通过它迅速验证一些常见的输入,并且可以自己扩充自己的验证方法，而且对国际化也有非常好的支持。

　　jquery.validate 官方网址：http://bassistance.de/jquery-plugins/jquery-plugin-validation/

简单html配置校验

　　这种方式直接将校验条件放到class中。
　　错误消息定义"data-msg-检验名称"作为它的属性，但要注意这里在1.10.0以后的版本才支持，旧版本需要使用javascript定制错误提示。

View Code

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 3  
 4 <title>1</title>
 5  
 6 <script src="jquery.js" type="text/javascript"></script>
 7 <script src="jquery.validate.js" type="text/javascript"></script>
 8  
 9 <script type="text/javascript">
10 // 仅在demo时使用
11 $.validator.setDefaults({
12     submitHandler: function() {
13         alert("submitted!");
14     }
15 });
16  
17 $(document).ready(function() {
18     $("#form1").validate();
19 });
20 </script>
21 <style type="text/css">
22 input.error {
23     border:1px solid red;
24 }
25 label.error {
26     color:red;
27 }
28 input.success {
29     border:1px solid green  ;
30 }
31 label.success {
32     color:green;
33 }
34 </style>
35 </head>
36 <body>
37     <div>
38         <form id="form1" method="get" action="">
39         <fieldset>
40         <legend>直接写在表单上</legend>
41             <label for="name">名字（必填*）</label>
42             <input type="text" name="name" class="required" data-msg-required="请输入名字"/>
43             <br>
44  
45             <label for="name">邮件（必填*）</label>
46             <input type="text" name="email"  class="required email" data-msg-required="请输入邮件" data-msg-email="邮件格式错误."/>
47             <br>
48             <input type="submit" value="提交"/>
49         </fieldset>
50         </form>
51     </div>
52  
53     <div id="warning"></div>
54 </body>
55 </html>

html中配置校验进阶
　　这种方式，需要多引入jquery.metadata.js。调用$.metadata.setType("attr", "validate");即可把校验的配置写到相应的属性上。

View Code

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 3  
 4 <title>2</title>
 5  
 6 <script src="jquery.js" type="text/javascript"></script>
 7 <script src="jquery.metadata.js" type="text/javascript"></script>
 8 <script src="jquery.validate.js" type="text/javascript"></script>
 9  
10 <script type="text/javascript">
11  
12 $.validator.setDefaults({
13     submitHandler: function() {
14         alert("submitted!");
15     }
16 });
17 //当配置这句话时，原来使用在class中的配置，可以被配置到validate中
18 $.metadata.setType("attr", "validate");
19  
20 $(document).ready(function() {
21     $("#form1").validate();
22     $("#form2").validate();
23 });
24 </script>
25 <style type="text/css">
26 input.error {
27     border:1px solid red;
28 }
29 label.error {
30     color:red;
31 }
32 input.success {
33     border:1px solid green  ;
34 }
35 label.success {
36     color:green;
37 }
38 </style>
39 </head>
40 <body>
41     <div>
42         <form id="form1" method="get" action="">
43         <fieldset>
44         <legend>直接写在表单上</legend>
45             <label for="name">名字（必填*）</label>
46             <input type="text" name="name" class="{required:true, messages:{required:'请输入名字.'}}"/>
47             <br>
48  
49             <label for="name">邮件（必填*）</label>
50             <input type="text" name="email" class="{required:true, email:true, messages:{required:'请输入邮件.',email:'邮件格式错误.'}}"/>
51             <br>
52             <input type="submit" value="提交"/>
53         </fieldset>
54         </form>
55     </div>
56  
57     <div>
58         <form id="form2" method="get" action="">
59         <fieldset>
60         <legend>直接写在表单上,并使用定制属性</legend>
61             <label for="name">名字（必填*）</label>
62             <input type="text" name="name" validate="{required:true, messages:{required:'请输入名字.'}}"/>
63             <br>
64  
65             <label for="name">邮件（必填*）</label>
66             <input type="text" name="email" validate="{required:true, email:true, messages:{required:'请输入邮件.',email:'邮件格式错误.'}}"/>
67             <br>
68             <input type="submit" value="提交"/>
69         </fieldset>
70         </form>
71     </div>
72     <div id="warning"></div>
73 </body>
74 </html>

纯javascript配置校验
　　纯javascript的方式，不需要引入额外的jquery.metadata.js文件。这种方式相对较灵活且不侵入html。

View Code

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 3  
 4 <title>3</title>
 5  
 6 <script src="jquery.js" type="text/javascript"></script>
 7 <script src="jquery.validate.js" type="text/javascript"></script>
 8  
 9 <script type="text/javascript">
10  
11 $.validator.setDefaults({
12     submitHandler: function() {
13         alert("submitted!");
14     }
15 });
16  
17 $(document).ready(function() {
18  
19     $("#form3").validate({
20  
21         rules: {
22             "name" : {required:true},
23             "email" : {required:true, email:true}
24         },
25         messages: {
26             "name" : {required:'请输入名字.'},
27             "email" : {required:'请输入邮件.',email:'邮件格式错误.'}
28         }
29     });
30 });
31 </script>
32 <style type="text/css">
33 input.error {
34     border:1px solid red;
35 }
36 label.error {
37     color:red;
38 }
39 input.success {
40     border:1px solid green  ;
41 }
42 label.success {
43     color:green;
44 }
45 </style>
46 </head>
47 <body>
48         <form id="form3" method="get" action="">
49         <fieldset>
50         <legend>写在Javascript上</legend>
51             <label for="name">名字（必填*）</label>
52             <input type="text" name="name"/>
53             <br>
54  
55             <label for="name">邮件（必填*）</label>
56             <input type="text" name="email"/>
57             <br>
58             <input type="submit" value="提交"/>
59         </fieldset>
60         </form>
61     </div>
62  
63     <div id="warning"></div>
64 </body>
65 </html>

统一输出错误到其它位置
　　在第三点的基础上，我们可以把消息统一输出到我们指定的位置。核心配置在于：errorLabelContainer和wrapper，详见代码：

View Code

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 3  
 4 <title>4</title>
 5  
 6 <script src="jquery.js" type="text/javascript"></script>
 7 <script src="jquery.validate.js" type="text/javascript"></script>
 8  
 9 <script type="text/javascript">
10  
11 $.validator.setDefaults({
12     submitHandler: function() {
13         alert("submitted!");
14     }
15 });
16  
17 $(document).ready(function() {
18     $("#form3").validate({
19         errorLabelContainer: $("#warning ul"),
20         wrapper: 'li',
21         rules: {
22             "name" : {required:true},
23             "email" : {required:true, email:true}
24         },
25         messages: {
26             "name" : {required:'请输入名字.'},
27             "email" : {required:'请输入邮件.',email:'邮件格式错误.'}
28         }
29     });
30 });
31 </script>
32 <style type="text/css">
33 input.error {
34     border:1px solid red;
35 }
36 label.error {
37     color:red;
38 }
39 input.success {
40     border:1px solid green  ;
41 }
42 label.success {
43     color:green;
44 }
45 </style>
46 </head>
47 <body>
48     <div>
49         <form id="form3" method="get" action="">
50         <fieldset>
51         <legend>写在Javascript上,并将错误信息输到其它位置</legend>
52             <label for="name">名字（必填*）</label>
53             <input type="text" name="name"/>
54             <br>
55  
56             <label for="name">邮件（必填*）</label>
57             <input type="text" name="email"/>
58             <br>
59             <input type="submit" value="提交"/>
60         </fieldset>
61         </form>
62     </div>
63  
64     <div id="warning"><ul></ul></div>
65 </body>
66 </html>