综述

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. webpack中的output.filename 和output.chunkFilename

    filename应该比较好理解,就是对应于entry里面生成出来的文件名.比如: { entry: { "index": "pages/index.jsx" } ...

  2. 如何通过编译Linux内核打开IPVS(LVS)的debug模式

    前言 为了定位keepalived VIP的问题, 一步一步定位到IPVS, IPVS默认是没有打开Debug模式的, 若需要打开Debug模式需要重新编译IPVS模块加载后才行, 最好的方式当然是仅 ...

  3. MACE(2)-----模型编译

    作者:十岁的小男孩 QQ:929994365 无用 本文仅用于学习研究,非商业用途,欢迎大家指出错误一起学习,文章内容翻译自 MACE 官方手册,记录本人阅读与开发过程,力求不失原意,但推荐阅读原文. ...

  4. poj2279 线性dp

    #include<iostream> #include<cstdio> #include<cstring> #define ll long long using n ...

  5. 20155309南皓芯 网络对抗《网络攻防》 Exp1 PC平台逆向破解(5)M

    实践目标 本次实践的对象是linux的可执行文件 该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字符串. 该程序同时包含另一个代码片段,getShell,会返回一个可 ...

  6. 【BZOJ3626】[LNOI2014]LCA

    题解: 数据结构套路真多.. 思考了一下线段树分治和启发式合并发现复杂度并不怎么对.. 看了题解发现都是套路啊 考虑一下lca(x,y)的dep有什么性质 我们把1-x的路径+1,查询1-y的路径和 ...

  7. A. 【UNR #2】积劳成疾

    链接:http://uoj.ac/contest/40/problem/311 题解: 一道很好的期望题吧 用dp的老思路,枚举最大值将序列分割 想到这个就很简单了 状态f[i][j]表示前i个,最大 ...

  8. 虚树------sdoi2011<消耗战>

    卡着时间过得,大概是因为全用了ll,时间涨了一倍吧?? 懒得改了,第一道虚树还是思路比较重要 下面这段文字是复制来的: 给出一棵树. 每次询问选择一些点,求一些东西.这些东西的特点是,许多未选择的点可 ...

  9. adb命令大全

    废话不多说,直接adb -help查看所有命令然后翻译 -a - directs adb to listen on all interfaces for a connection 指导adb监听连接的 ...

  10. Tkinter的下拉列表Combobox

    Tkinter的下拉列表Combobox   tk中下拉列表使用ttk.Combobox,代码如下:   #!/usr/bin/env python   # -*- coding: utf-8 -*- ...