表单验证插件—

表单验证插件——validate

该插件自带包含必填、数字、URL在内容的验证规则，即时显示异常信息，此外，还允许自定义验证规则，插件调用方法如下：

$(form).validate({options})

其中form参数表示表单元素名称，options参数表示调用方法时的配置对象，所有的验证规则和异常信息显示的位置都在该对象中进行设置。

 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>表单验证插件</title>
 5         <script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script>
 6         <script type="text/javascript" src="http://www.imooc.com/data/jquery.validate.js"></script>
 7         <script type="text/javascript" src="http://www.imooc.com/data/jquery.validate.messages_cn.js"></script>
 8     <style>
 9         #divtest
10         {
11              282px;
12         }
13         #divtest .title
14         {
15             padding: 8px;
16             background-color: blue;
17             color: #fff;
18             height: 23px;
19             line-height: 23px;
20             font-size: 15px;
21             font-weight: bold;
22         }
23         #divtest .content
24         {
25             padding: 8px 0px;
26             background-color: #fff;
27             font-size: 13px;
28         }
29         #divtest .content .tip
30         {
31             color: Red;
32             font-size: 12px;
33         }
34         .fl
35         {
36             float: left;
37         }
38         .fr
39         {
40             float: right;
41         }    
42     </style>
43     </head>
44     <body>
45         <form id="frmV" method="get" action="#">
46             <div id="divtest">
47                 <div class="title">
48                     <span class="fl">表单验证插件</span> 
49                     <span class="fr">
50                         <input id="btnSubmit" type="submit" value="提交" />
51                     </span>
52                 </div>
53                 <div class="content">
54                     <span class="fl">邮箱：</span><br />
55                     <input id="email" name="email" type="text" /><br />
56                     <span class="tip"></span>
57                 </div>
58             </div>
59         </form>
60         
61         <script type="text/javascript">
62             $(function () {
63                 $("#frmV").validate(
64                   {
65                       /*自定义验证规则*/
66                       rules: {
67                             email:{
68                             required:true,
69                             email:true
70                           }
71                       },
72                       /*错误提示位置*/
73                       errorPlacement: function (error, element) {
74                           error.appendTo(".tip");
75                       }
76                   }
77                 );
78             });
79         </script>
80     </body>
81 </html>

View Code