jQuery验证插件 Validate详解

时间：2022-11-30 15:08:48

1.引入必要的文件,以及语言中文提示包

2.使用规则如下:

序号 规则 描述
1 required:true 必须输入的字段。
2 remote:"check.php" 使用 ajax 方法调用 check.php 验证输入值。
3 email:true 必须输入正确格式的电子邮件。
4 url:true 必须输入正确格式的网址。
5 date:true 必须输入正确格式的日期。日期校验 ie6 出错，慎用。
6 dateISO:true 必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。
7 number:true 必须输入合法的数字（负数，小数）。
8 digits:true 必须输入整数。
9 creditcard: 必须输入合法的信用卡号。
10 equalTo:"#field" 输入值必须和 #field 相同。
11 accept: 输入拥有合法后缀名的字符串（上传文件的后缀）。
12 maxlength:5 输入长度最多是 5 的字符串（汉字算一个字符）。
13 minlength:10 输入长度最小是 10 的字符串（汉字算一个字符）。
14 rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。
15 range:[5,10] 输入值必须介于 5 和 10 之间。
16 max:5 输入值不能大于 5。
17 min:10 输入值不能小于 10

3.

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 
 7 </head>
 8 <style>
 9     em.error {
10         background: red;
11          /*自定义错误提示图
12          background: url('../image/error.png') no-repeat left center;
13          */
14         }
15         em.success {
16             background: green;
17         }
18 </style>
19 <script src="/jquery-validation-1.14.0/lib/jquery.js"></script>
20 <script src="/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
21 <!-- 中文错误提示信息 -->
22 <script src="/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
23 <body>
24     
25 <form class="cmxform" id="commentForm" method="get" action="">
26   <fieldset>
27     <legend>一个简单的validate验证带验证提示的评论例子</legend>
28     <p>
29       <label for="cusername">姓名</label>
30       <em>*</em><input id="cusername" name="username" size="25" />
31     </p>
32     <p>
33       <label for="cemail">电子邮件</label>
34       <em>*</em><input id="cemail" name="email" size="25"  />
35     </p>
36     <p>
37       <label for="curl">网址</label>
38       <em>  </em><input id="curl" name="url" size="25" />
39     </p>
40     <p>
41       <label for="comment">你的评论</label>
42       <em>*</em><textarea id="comment" name="comment" cols="22" ></textarea>
43     </p>
44     <p>
45       <label for="cvalcode">验证码</label>
46       <input id="valcode" name="valcode"  />7+9=?
47     </p>
48   <p>
49       <input class="submit" type="submit" value="提交"/>
50     </p>
51      
52   <script>
53     /*自定义一个验证方法*/
54     /*
55     formula是需要验证方法的名字 好比如required 必须的。
56     value返回的当前input的value值
57     param返回的是当前自定义的验证格式 好比如：7+9
58     在试用了eval方法 让字符串相加
59      */
60     $.validator.addMethod("formula",function(value,element,param){
61        return value==eval(param)
62      },"请正确输入验证信息");
63 
64      $("#commentForm").validate({
65        rules:{
66          username:{
67            required:true,
68            minlength:2
69          },
70          email:{
71            required:true,
72            email:true
73          },
74          url:"url",
75          comment:"required",
76          valcode: {
77            formula: "7+9"  
78          }
79        },
80        /* 自定义错误消息*/
81        messages:{
82          username:{
83            required:"报告,必须输入点东西",
84            minlength:"长度不够"
85          }
86        },
87        /*自定义错误提示样式*/
88        errorElement:"em",
89        success:function(label){
90          label.text("成功 ").addClass('success')
91        }
92      });
93   </script>
94 
95 </form>
96 </body>
97 </html>

4.使用 ajax 方式进行验证，默认会提交当前验证的值到远程地址，如果需要提交其他的值，可以使用 data 选项。

remote: {
    url: "check-email.php",     //后台处理程序
    type: "post",               //数据发送方式
    dataType: "json",           //接受数据格式   
    data: {                     //要传递的数据
        username: function() {
            return $("#username").val();
        }
    }
}

注意:远程地址只能输出 "true" 或 "false"，不能有其他输出。

标签：

相关文章