jQuery 应用一之验证插件 validate 的使用

举报
崔庆才丨静觅 发表于 2021/05/22 01:41:29 2021/05/22
【摘要】 综述 validate 是一个用来验证表单提交的插件，应用十分广泛，具有如下的几个功能 自带了基本的验证规则 提供了丰富的验证信息提示功能 多种事件触发验证 自定义验证规则 下面我们就来感受一下这个插件的强大之处吧 插件下载 在这里我们需要用到的插件文件有 jquery.validate.js jquery.validate.messages_cn.js jquer...

综述

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 元素中，从而在标签内部显示错误的内容。 其他的情况我们可以灵活处理。

成功验证

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

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 的用法，利用好这款插件对于编写将有极其大的帮助，希望大家能好好学习！

文章来源: cuiqingcai.com，作者：崔庆才，版权归原作者所有，如需转载，请联系作者。

原文链接：cuiqingcai.com/1544.html

【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
jQuery jQuery UI
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入