综述

validate是一个用来验证表单提交的插件，应用十分广泛，具有如下的几个功能

  • 自带了基本的验证规则
  • 提供了丰富的验证信息提示功能
  • 多种事件触发验证
  • 自定义验证规则

下面我们就来感受一下这个插件的强大之处吧

插件下载

在这里我们需要用到的插件文件有

一个是表单验证的主文件，另一个是设置中文提示的文件。

实例引入

我们先用一个小例子来感受一下使用 validate 插件的便捷之处，这个例子中加入了表单合法性验证和错误提示，代码如下

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE>
<html>
<head>
    <title>validate验证插件</title>
    <script type="text/javascript"
            src="http://res.cuiqingcai.com/js/jquery.min.js">
    </script>
    <script type="text/javascript"
            src="http://res.cuiqingcai.com/js/jquery.validate.js">
    </script>
    <script type="text/javascript"
            src="http://res.cuiqingcai.com/js/jquery.validate.messages_cn.js">
    </script>
    <link type="text/css" rel="stylesheet" href="http://res.cuiqingcai.com/jqplugins/validate/style.css"></link>
    <script type="text/javascript">
        $(function() {
            $("#frmV").validate(
              {
                  /*自定义验证规则*/
                  rules: {
                      username: { required: true, minlength: 6 },
                      email: { required: true, email: true }
                  },
                  /*错误提示位置*/
                  errorPlacement: function(error, element) {
                      error.appendTo(element.siblings("span"));
                  }
              }
            );
        });
    </script>
</head>
<body>
     <form id="frmV" method="get" action="#">
     <div class="divFrame">
         <div class="divTitle">
              请输入下列资料
         </div>
         <div class="divContent">
              <div>
              用户名：<br />
              <input id="username" name="username"
                     type="text" class="txt" />
              <font color="red">*</font><br />
              <span></span>
              </div>
              <div>
              邮箱：<br />
              <input id="email" name="email"
                     type="text" class="txt" />
              <font color="red">*</font><br />
              <span></span>
              </div>
         </div>
         <div class="divBtn">
              <input id="sbtUser" type="submit"
                     value="提交" class="btn" />
         </div>
     </div>
     </form>
</body>
</html>

运行结果如下

在这里我们定义了 rules 来控制表单的合法性，通过 errorPlacement 来控制错误的输出位置。

校验规则

下面我们详细说一下关于rules的相关知识，将校检规则总结如下

序号 规则 描述
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。

比如我们针对 email 这个表单就可以定义为

 
1
email: { required: true, email: true }

针对url的这个输入表单就可以定义为

 
1
url: { required: true, url: true }

以上便是校验规则的相关内容。

消息提示

在 jquery.validate.js 这个文件中，定义了默认的消息提示，不过它是英文的提示，默认的提示如下

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
messages: {
    required: "This field is required.",
    remote: "Please fix this field.",
    email: "Please enter a valid email address.",
    url: "Please enter a valid URL.",
    date: "Please enter a valid date.",
    dateISO: "Please enter a valid date (ISO).",
    dateDE: "Bitte geben Sie ein gültiges Datum ein.",
    number: "Please enter a valid number.",
    numberDE: "Bitte geben Sie eine Nummer ein.",
    digits: "Please enter only digits",
    creditcard: "Please enter a valid credit card number.",
    equalTo: "Please enter the same value again.",
    accept: "Please enter a value with a valid extension.",
    maxlength: $.validator.format("Please enter no more than {0} characters."),
    minlength: $.validator.format("Please enter at least {0} characters."),
    rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
    range: $.validator.format("Please enter a value between {0} and {1}."),
    max: $.validator.format("Please enter a value less than or equal to {0}."),
    min: $.validator.format("Please enter a value greater than or equal to {0}.")
},

比如，如果遇到 email 校验有问题，那么便会提示

 
1
Please enter a valid email address

不过我们通过引入 jquery.validate.messages_cn.js 这个文件，写入了如下代码，将默认的提示修改为中文

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
jQuery.extend(jQuery.validator.messages, {
        required: "必选字段",
        remote: "请修正该字段",
        email: "请输入正确格式的电子邮件",
        url: "请输入合法的网址",
        date: "请输入合法的日期",
        dateISO: "请输入合法的日期 (ISO).",
        number: "请输入合法的数字",
        digits: "只能输入整数",
        creditcard: "请输入合法的信用卡号",
        equalTo: "请再次输入相同的值",
        accept: "请输入拥有合法后缀名的字符串",
        maxlength: jQuery.format("请输入一个长度最多是 {0} 的字符串"),
        minlength: jQuery.format("请输入一个长度最少是 {0} 的字符串"),
        rangelength: jQuery.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),
        range: jQuery.format("请输入一个介于 {0} 和 {1} 之间的值"),
        max: jQuery.format("请输入一个最大为 {0} 的值"),
        min: jQuery.format("请输入一个最小为 {0} 的值")
});

当然，以上的设置都是默认的提示，我们还可以通过 messages 来设置提示，举一个小例子，加入 messages 选项

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE>
<html>
<head>
    <title>validate验证插件</title>
    <script type="text/javascript"
            src="http://res.cuiqingcai.com/js/jquery.min.js">
    </script>
    <script type="text/javascript"
            src="http://res.cuiqingcai.com/js/jquery.validate.js">
    </script>
    <script type="text/javascript"
            src="http://res.cuiqingcai.com/js/jquery.validate.messages_cn.js">
    </script>
    <link type="text/css" rel="stylesheet" href="http://res.cuiqingcai.com/jqplugins/validate/style.css">
    <script type="text/javascript">
        $(function() {
            $("#frmV").validate(
              {
                  /*自定义验证规则*/
                  rules: {
                      username: { required: true, minlength: 6 },
                      email: { required: true, email: true }
                  },
                  /*错误提示位置*/
                  errorPlacement: function(error, element) {
                      error.appendTo(element.siblings("span"));
                  },
                  messages: {
                      username: { required: "请输入姓名", minlength: "长度不可小于6" },
                      email: { required: "请输入电子邮件", email: "请输入正确格式" }
                  }
              }
            );
        })
    </script>
</head>
<body>
     <form id="frmV" method="get" action="#">
     <div class="divFrame">
         <div class="divTitle">
              请输入下列资料
         </div>
         <div class="divContent">
              <div>
              用户名：<br />
              <input id="username" name="username"
                     type="text" class="txt" />
              <font color="red">*</font><br />
              <span></span>
              </div>
              <div>
              邮箱：<br />
              <input id="email" name="email"
                     type="text" class="txt" />
              <font color="red">*</font><br />
              <span></span>
              </div>
         </div>
         <div class="divBtn">
              <input id="sbtUser" type="submit"
                     value="提交" class="btn" />
         </div>
     </div>
     </form>
</body>
</html>

运行结果如下

失败验证

 
1
2
3
  errorPlacement: function(error, element) {
error.appendTo(element.siblings("span"));
},

我们用 errorPlacement 来处理验证失败后的处理，方法有两个参数，一个是error，一个是element。

其中error是字符串，保存了messages中返回的错误信息，element是验证失败的input元素。

比如上面这一句

 
1
error.appendTo(element.siblings("span"));

就代表把错误加入到input元素同级的span元素中，从而在<span>标签内部显示错误的内容。

其他的情况我们可以灵活处理。

成功验证

有失败就有成功，在这里我们可以用一个函数来实现成功的验证

 
1
2
3
success: function(label) {
label.html("OK");
}

这里的label指的是发生错误时那个标签，就是上面例子中的span，通过html()方法可以实现标签内容的变化。例如下面的例子

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE>
<html>
<head>
    <title>validate验证插件</title>
    <meta charset="utf-8"/>
    <script type="text/javascript"
            src="http://res.cuiqingcai.com/js/jquery.min.js">
    </script>
    <script type="text/javascript"
            src="http://res.cuiqingcai.com/js/jquery.validate.js">
    </script>
    <script type="text/javascript"
            src="http://res.cuiqingcai.com/js/jquery.validate.messages_cn.js">
    </script>
    <link type="text/css" rel="stylesheet" href="http://res.cuiqingcai.com/jqplugins/validate/style.css">
    <script type="text/javascript">
        $(function() {
            $("#frmV").validate(
              {
                  /*自定义验证规则*/
                  rules: {
                      username: { required: true, minlength: 6 },
                      email: { required: true, email: true }
                  },
                  /*错误提示位置*/
                  errorPlacement: function(error, element) {
                      error.appendTo(element.siblings("span"));
                  },
                  messages: {
                      username: { required: "请输入姓名", minlength: "长度不可小于6" },
                      email: { required: "请输入电子邮件", email: "请输入正确格式" }
                  },
                  success: function(label) {
                      label.html("OK");
                  }
              }
            );
        })
    </script>
</head>
<body>
     <form id="frmV" method="get" action="#">
     <div class="divFrame">
         <div class="divTitle">
              请输入下列资料
         </div>
         <div class="divContent">
              <div>
              用户名：<br />
              <input id="username" name="username"
                     type="text" class="txt" />
              <font color="red">*</font><br />
              <span>呵呵</span>
              </div>
              <div>
              邮箱：<br />
              <input id="email" name="email"
                     type="text" class="txt" />
              <font color="red">*</font><br />
              <span></span>
              </div>
         </div>
         <div class="divBtn">
              <input id="sbtUser" type="submit"
                     value="提交" class="btn" />
         </div>
     </div>
     </form>
</body>
</html>

上面就是验证成功之后的效果，在相应提示的地方会显示OK。

异步验证

有时候我们需要用到异步验证，我们可以在rules中加入remote进行远程验证，例子如下

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE>
<html>
<head>
    <title>validate验证插件</title>
    <meta charset="utf-8"/>
    <script type="text/javascript"
            src="http://res.cuiqingcai.com/js/jquery.min.js">
    </script>
    <script type="text/javascript"
            src="http://res.cuiqingcai.com/js/jquery.validate.js">
    </script>
    <script type="text/javascript"
            src="http://res.cuiqingcai.com/js/jquery.validate.messages_cn.js">
    </script>
    <link type="text/css" rel="stylesheet" href="http://res.cuiqingcai.com/jqplugins/validate/style.css">
    <script type="text/javascript">
        $(function() {
            $("#frmV").validate(
                {
                    /*自定义验证规则*/
                    rules: {
                        username: { required: true, minlength: 6 },
                        phone: {
                            required: true,
                            remote:{
                                url: "check_phone.php",     //后台处理程序
                                type: "post",               //数据发送方式
                                dataType: "json",           //接受数据格式  
                                data: {                     //要传递的数据
                                    phone: function() {
                                        return $("#phone").val();
                                    }
                                }
                            }
                        }
                    },
                    /*错误提示位置*/
                    errorPlacement: function(error, element) {
                      error.appendTo(element.siblings("span"));
                    },
                    messages: {
                      username: { required: "请输入姓名", minlength: "长度不可小于6" },
                      phone: { required: "请输入电话", remote: "请输入正确格式" }
                    },
                    success: function(label) {
                      label.html("OK");
                    }
                }
            );
        })
    </script>
</head>
<body>
     <form id="frmV" method="get" action="#">
     <div class="divFrame">
         <div class="divTitle">
              请输入下列资料
         </div>
         <div class="divContent">
              <div>
              用户名：<br />
              <input id="username" name="username"
                     type="text" class="txt" />
              <font color="red">*</font><br />
              <span></span>
              </div>
              <div>
              电话号码：<br />
              <input id="phone" name="phone"
                     type="text" class="txt" />
              <font color="red">*</font><br />
              <span></span>
              </div>
         </div>
         <div class="divBtn">
              <input id="sbtUser" type="submit"
                     value="提交" class="btn" />
         </div>
     </div>
     </form>
</body>
</html>

PHP处理程序，注意这里的返回值只能是true或者false，并且需要加引号。

 
1
2
3
4
5
6
7
8
<?php
    $phone = $_POST['phone'];
    if((strlen($phone) != 11) || !(preg_match("/13[0123456789]{1}\d{8}|15[012356789]\d{8}|18[0123456789]\d{8}|17[0678]\d{8}|14[57]\d{8}/",$phone))){
        echo "false";
     }else{
        echo "true";
     }
?>

演示如下

上面就是进行ajax异步验证的处理方式

自定义方法

有时候我们需要自定义一些验证方法，我们就需要用到addMethod方法，介绍如下

addMethod(name,method,message)方法

参数name 是添加的方法的名字

参数method是一个函数,接收三个参数(value,element,param) value 是元素的值,element是元素本身

param是参数,我们可以用addMethod 来添加除built-in Validation methods 之外的验证方法

例如手机号码的验证如下

 
1
2
3
4
5
6
7
$.validator.addMethod("phone",function(value,element,params){
         if((value.length != 11) || (!value.match(/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|17[0|6|7|8]|18[0-9])\d{8}$/))){
            return false;
         }else{
            return true;
        }
    },"请输入正确的手机号");

使用时如下

 
1
2
3
4
5
rules:{
            phone:{
                required:true,phone:true
            },
        },

有一个字段,只能输一个字母,范围是a-f,写法如下

 
1
2
3
4
5
6
7
8
9
10
$.validator.addMethod(“af”,function(value,element,params){
    if(value.length>1){
        return false;
    }
    if(value>=params[0] && value<=params[1]){
        return true;
    }else{
        return false;
    }
},”必须是一个字母,且a-f”);

使用时如下

 
1
2
3
rules:{
            username:{ af:["a","f"] }
        },

以上便是自定义验证方法的方式

DeBug模式

开启DeBug模式后，不会进行提交，只需要在代码中加入

 
1
debug:true

即可，这样不论怎样，都不会提交表单，对于调试十分有用。

验证通过提交

在上面的例子中，我们没有设置表单验证通过之后才提交，通过加入以下代码，可以实现验证之后才提交的效果

 
1
2
3
submitHandler:function(form){
form.submit();
}

通过设置上面的内容，我们就可以避免验证不成功submit跳转了

忽略元素

有时候，我们想跳过某些元素不进行验证，可以通过加入如下代码来实现，举例如下

 
1
ignore:"input",

忽略所有input元素

 
1
ignore:"#username",

忽略id为username的元素

 
1
ignore:".input",

忽略所有class为input的元素

响应事件

在默认的响应事件是 submit 提交事件，我们还可以通过设置来改变事件的响应，比如失去焦点时验证等等，举例如下

Onubmit：类型 Boolean，默认 true，指定是否提交时验证。

 
1
$(".selector").validate({       onsubmit:false })

onfocusout：类型 Boolean，默认 true，指定是否在获取焦点时验证。

 
1
$(".selector").validate({     onfocusout:false })

onkeyup：类型 Boolean，默认 true，指定是否在敲击键盘时验证。

 
1
$(".selector").validate({    onkeyup:false })

onclick：类型 Boolean，默认 true，指定是否在鼠标点击时验证（一般验证 checkbox、radiobox）。

 
1
$(".selector").validate({    onclick:false })

focusInvalid：类型 Boolean，默认 true。提交表单后，未通过验证的表单（第一个或提交之前获得焦点的未通过验证的表单）会获得焦点。

 
1
$(".selector").validate({    focusInvalid:false })

focusCleanup：类型 Boolean，默认 false。当未通过验证的元素获得焦点时，移除错误提示（避免和 focusInvalid 一起使用）。

 
1
$(".selector").validate({    focusCleanup:true })

上面的响应事件一般不太常用，仅作了解即可。

总结

以上便是jQuery插件validate的用法，利用好这款插件对于编写将有极其大的帮助，希望大家能好好学习！

jQuery应用一之验证插件validate的使用的更多相关文章

  1. 表单验证插件——validate

    表单验证插件——validate 该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下: $(form).validate({options ...

  2. 【锋利的jQuery】表单验证插件踩坑

    和前几篇博文提到的一样,由于版本原因,[锋利的jQuery]表单验证插件部分又出现照着敲不出效果的情况. 书中的使用方法: 1. 引入jquery源文件, 2. 引入表单验证插件js文件, 3. 在f ...

  3. jQuery formValidator表单验证插件

    什么是jQuery formValidator? jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人 ...

  4. jQuery Validate 表单验证插件----Validate简介，官方文档，官方下载地址

     一. jQuery Validate 插件的介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆 ...

  5. Jquery表单验证插件validate

    写在前面: 在做一些添加功能的时候,表单的提交前的验证是必不可少的,jquery的validate插件就还可以,对于基本的需求已经够了.这里记录下基本的用法. 还是写个简单的demo吧 <htm ...

  6. jquery formValidator 表单验证插件, ajax无法传值到后台问题的解决

    今天使用jquery   formValidator-4.0.1 这个插件做表单验证,  前台验证已写好, 准备写ajax验证, 结果无法把值传到后台 .ajaxValidator({ url : & ...

  7. aspx中的表单验证 jquery.validate.js 的使用 以及 jquery.validate相关扩展验证(Jquery表单提交验证插件)

    这一期我们先讲在aspx中使用 jquery.validate插件进行表单的验证, 关于MVC中使用 validate我们在下一期中再讲     上面是效果,下面来说使用步骤 jQuery.Valid ...

  8. jQuery验证插件 Validate详解

    1.引入必要的文件,以及语言中文提示包 2.使用规则如下: 序号 规则 描述 1 required:true 必须输入的字段. 2 remote:"check.php" 使用 aj ...

  9. jquery 验证插件 validate

    1)required:true 必输字段(2)remote:"check.php" 使用ajax方法调用check.php验证输入值(3)email:true 必须输入正确格式的电 ...

随机推荐

  1. JS定义一个立即执行的可重用函数

    我定义了一个函数表达式 testFun var testFun = (function() { ... //函数内容})(); 测试结果:虽然 testFun 函数有如愿在页面加载后立即被执行,但再次 ...

  2. GuzzleHttp 请求设置超时时间

    之前调用一个三方的 WEB API,大量的请求超时,导致 PHP 进程被占用完.整个网站一直报 504. 其中一个优化措施就是对三方 API 调用设置超时时间. use GuzzleHttp\Clie ...

  3. BBC 记录片planet earth

    He'll have to remain on guard for another two weeks, but in the jungle, just surviving the day can c ...

  4. 获取table行列

    var table =document.getElementById("add_purchaseOrderDetailList_table"); var rows = table. ...

  5. POJ 3190 Stall Reservations【贪心】

    POJ 3190 题意: 一些奶牛要在指定的时间内挤牛奶,而一个机器只能同时对一个奶牛工作.给你每头奶牛的指定时间的区间(闭区间),问你最小需要多少机器.思路:先按奶牛要求的时间起始点进行从小到大排序 ...

  6. google gcr.io、k8s.gcr.io 国内镜像

    1.首先添加docker官方的国内镜像 sudo tee /etc/docker/daemon.json <<-'EOF' { "registry-mirrors": ...

  7. Unity 精灵物体的创建 Sprite.create

    参考链接:http://www.cnblogs.com/BuladMian/p/6226744.html 创建预制体精灵 优点:创建大量相同精灵,只用调用一个预制体精灵,避免了 计算机大量重复创建会导 ...

  8. HTML之marquee妙用

    下面简短几句代码就实现了电子相册自动轮播 <center><h1>网页电子相册</h1></center> <marquee scrollamou ...

  9. hdu 2647 Reward(拓扑排序+反图)

    题目链接:https://vjudge.net/contest/218427#problem/C 题目大意: 老板要给很多员工发奖金, 但是部分员工有个虚伪心态, 认为自己的奖金必须比某些人高才心理平 ...

  10. docker使用dockerfile 构建redis镜像

    FROM redis WORKDIR /data VOLUME /data EXPOSE RUN echo "success---------success" ENTRYPOINT ...