本例中regex为验证输入框输入的值的正则限制,remote则主要用于需要后台配合的如用户名是否存在等场景
var $XxxForm= $("#xxx-xxx");
var icon = "<i class='zmdi zmdi-close-circle zmdi-hc-fw'></i> "; //错误信息前的小图标
$.validator.addMethod("regex", //addMethod第1个参数:方法名称
function(value,element,params){//addMethod第2个参数:验证方法,参数(被验证元素的值,被验证元素,参数)
var exp = new RegExp(params);//实例化正则对象,参数为传入的正则表达式
return exp.test(value); //测试是否匹配
},icon + "格式错误");//addMethod第3个参数:默认错误信息
validator = $XxxForm.validate({
rules: {
aaa: {
required: true,
regex:/^[a-zA-Z]{1}([a-zA-Z0-9]){4,19}$/,
remote: {
url: "xxx/xxxx",
type: "get",
dataType: "json",
data: {
XXX: function () {
return $("input[name='XX']").val().trim();
},
XX: function () {
return $("input[name='XX']").val().trim();
}
}
}
},
bbb: {
required: true,
regex:/^[a-zA-Z0-9_]{6,36}$/
},
ccc: {
required: true,
equalTo: "#password"
}
},
messages: {
aaa: {
required: icon + "请输入aaa",
regex:icon + "用户名必须以英文开头,仅支持5-20位的英文或数字",
remote: icon + "用户名已经存在"
},
bbb: {
required: icon + "请输入bbb",
regex:icon + "密码强度为6-36位的数字,字母或下划线组成",
},
ccc: {
required: icon + "请再次输入新密码",
equalTo: icon + "两次密码输入不一致"
}
}