jquery.validate使用(基本篇)
微冷 2021/9/27 jQuery
该使用说明基于ruoyi框架，很多引用不会做详细说明。
# 一、依赖引用
- 1、打开BootCDN (opens new window) 输入jquery-validate (opens new window) 进入到下载地址
- 2、选择下载文件或者直接引用连接
- 3、在自己的项目中引入jquery-valiate
# 二、api说明
官网说明：https://jqueryvalidation.org/documentation/ (opens new window)
常用验证：
| 配置项 | 说明 |
|---|---|
| required:true | 必输字段 |
| remote:"check-email.php" | 使用ajax方法调用验证输入值 |
| email:true | 必须输入正确格式的电子邮件 |
| url:true | 必须输入正确格式的网址 |
| date:true | 必须输入正确格式的日期，日期校验ie6出错，慎用 |
| dateISO:true | 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性 |
| number:true | 必须输入合法的数字(负数，小数) |
| digits:true | 必须输入整数 |
| creditcard:true | 必须输入合法的信用卡号 |
| equalTo:"#password" | 输入值必须和#password相同 |
| accept: | 输入拥有合法后缀名的字符串（上传文件的后缀） |
| maxlength:5 | 输入长度最多是5的字符串(汉字算一个字符) |
| minlength:10 | 输入长度最小是10的字符串(汉字算一个字符) |
| rangelength:[5,10] | 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符) |
| range:[5,10] | 输入值必须介于 5 和 10 之间 |
| max:5 | 输入值不能大于5 |
| min:10 | 输入值不能小于10 |
# 三、自定义验证
官网说明：https://jqueryvalidation.org/jQuery.validator.addMethod/ (opens new window)
官网demo:
jQuery.validator.addMethod("domain", function(value, element) {
return this.optional(element) || /^http:\/\/mycorporatedomain.com/.test(value);
}, "Please specify the correct domain for your documents");
1
2
3
2
3
自定义demo：
验证数据是否符合某个条件，否则去后台验证数据是否合法，代码高亮部分是需要注意的地方
$.validator.addMethod("myValidator", function(value, element) {
// 验证value格式是否正确
if(!isPhone(value)){
// 如果格式错误直接返回验证失败
return false;
}
else{
// 调用远程接口判断数据是否已经存在，如果存在则失败
let result = false; //默认失败
$.ajax({
url: "/myValidate",
type: "post",
dataType: "json",
async: false, // 设置同步，否则ajax校验不生效
data: {
phone : value
},
success: function(res) {
if (res.code == 0){
// 如果成功，则设置结果为true
result = true; // 不能直接return，直接return只作用到当前success函数，不是真个验证方法
}
},
error:function () {
$.modal.msgError("系统出现错误！");
}
});
return result;
}
}, "myValiator验证失败");
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
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
# 四，一个demo
- 网络demo：https://www.cnblogs.com/linjiqin/p/3431835.html (opens new window)
- 官网demo：https://jqueryvalidation.org/files/demo/ (opens new window)
<body>
<div id="page1" data-role="page">
<div data-role="header">
<h1>Welcome</h1>
</div>
<div data-role="content">
<form method="GET">
<div data-role="fieldcontain">
<label for="email">Email:</label>
<input type="email" name="email" id="email">
</div>
<div data-role="fieldcontain">
<label for="password">Password:</label>
<input type="password" name="password" id="password">
</div>
<input data-role="submit" type="submit" value="Login">
</form>
</div>
</div>
</body>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
留言：