Jquery Validate相关参数及常用的自定义验证规则



一、官网地址: http://bassistance.de/jquery-plugins/jquery-plugin-validation

二、默认校验规则

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

三、默认的提示

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}.")
},

示例:

1
2
3
.error[generated='true'] {
color: red;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$("#fm").validate({
rules:{
loginpwd:{
required:true,
minlength:6,
maxlength:12
}
},
messages:{
loginpwd:{
required: "请输入密码",
minlength: "密码长度不能小于 6 个字母",
maxlength: "密码长度不能大于 12 个字母"
}
  }
});

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
remote: {
url: '/paral/project/validProjectcode.do',
type: 'post',
dataType: "json",
data: {
"project.projectcode": function () {
return $("[name='project.projectCode1']").val() + "-" + $("[name='project.projectCode2']").val() + "-" + $("[name='project.projectCode3']").val() + "-" + $("[name='project.projectCode4']").val() + "-" + $("[name='project.projectCode5']").val();
}
}
}


public boolean verifyProjectcode(@RequestParam(value = "projectcode",defaultValue = "") String projectcode){
if(StringUtils.isNotEmpty(projectcode)) {
return projectService.verifyProjectcode(projectcode);
}
return false;
}

messages:{
projectcode:{
remote: '工程编码已经存在'
}
}

四、Jquery Validate 自定义验证规则

1
2
3
4
5
6
7
addMethod(name,method,message)方法
----------------------------------------------
参数 name 是添加的方法的名字。

参数 method 是一个函数,接收三个参数 (value,element,param) 。

value 是元素的值,element 是元素本身,param 是参数。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 推荐:方式一,单个校验提示
jQuery.validator.addMethod("checkInput", function (value, element) {
var reg = /^(\-|\+)?\d+(\.\d+)?$/;
return reg.test(value);
}, "不允许输入字母")

// 方式二,不仅校验特殊字符及空格
jQuery.validator.addMethod("checkInput", function(value, element) {
var pattern = new RegExp("[.`~!@#$^&*=|{}':;',\\[\\]<>《》/?~!@#¥……&*|{}【】‘;:”“'。,、?' ']");
var reg = /^([0-9]+)$/;
if(pattern.test(value)) {
// 不都是数字即拦截,false
return false;
} else if(value.indexOf(" ") != -1){
// 如果要检索的字符串值没有出现,则该方法返回 -1。
return false;
} else {
// 放行
return true;
}
}, "禁止输入特殊字符及空格");
1
2
3
4
5
6
7
8
9
10
11
// $("#fm").validate({})中检验
rules: {
roleName: {
checkInput: true
}
},
messages: {
roleName: {
checkInput: "禁止输入特殊字符及空格"
}
}

注意: 如果有多个检验提示时,注意先后顺序,会有提示的优先级别。

1
2
3
4
5
// 先调用checkInput检验是否有特殊字符,没有的话再maxlength检验长度是否符合,依次进行...
"totalMoney": {required: true, checkInput: true, maxlength: 14, min: 0},

// 先调用maxlength检验长度是否符合,再看checkInput检验是否有特殊字符,依次进行...
"totalMoney": {required: true, maxlength: 14, checkInput: true, min: 0},

参考链接-CSDN博主「瓜皮猫咪」
参考链接-博客园「king西阳」

打赏
  • 版权声明: 本博客所有文章除特别声明外,均采用 Apache License 2.0 许可协议。转载请注明出处!
  1. © 2020 Liu Yang    湘ICP备20003709号

请我喝杯咖啡吧~

支付宝
微信