jQuery的表单验证框架添加自定义验证方式:
validate.js提供了addMethod方法可使用户实现自定义验证,如下所示:其中有三个参数,methodName即为验证的方法名,在验证rules里若设置为true,则会调用function方法对表单数据进行验证。function即为验证数据函数,第三个参数为默认的提示信息。
jQuery.validator.addMethod("methodName", function(value, element) {
}, "default message");
自定义验证日期格式的代码如下:
jQuery.validator.addMethod("isDate", function(value, element) {
var reg = /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/;
return this.optional(element) || reg.test(value);
}, "please input rightful date format");
我测试了一下,validate.js提供的required验证只能验证数据不为空,但是没有对空白字符进行验证,于是我添加了一个自定义的require验证,代码如下:
jQuery.validator.addMethod("require", function(value, element) {
var regExp = new RegExp(/^\s*\s$/g);
if (value === null || value === "" || value === null
|| typeof value === undefined) {
return false;
} else if (regExp.test(value)) {
return false;
} else {
return true;
}
}, "required");
下面为具体的对表单字段的验证规则:
$("#create_exam_form").validate({
errorElement: "label",
rules : {
examName : {
require : true
},
date : {
require : true,
isDate : true
},
hour : {
require : true,
min : 00,
max : 23
},
minute : {
required : true,
min : 00,
max : 59
},
duration : {
require : true,
number : true
},
questionQuantity : {
required : true,
number : true,
min : 1
},
questionScore : {
require : true,
number : true,
min : 1
},
totalScore : {
require : true,
number : true
},
passCriteria : {
require : true,
number : true
}
},
messages : {
examName : {
require : "required",
},
date : {
require : "required",
isDate : "format incorrect"
},
hour : {
require : "required",
number : "shoule be number",
min : "mininum value is 00",
max : "maximum value is 23"
},
minute : {
require : "required",
number : "shoule be number",
min : "mininum value is 00",
max : "maximum value is 59"
},
duration : {
require : "required",
number : "shoule be number"
},
questionQuantity : {
require : "required",
number : "shoule be number",
min : "mininum value is 1"
},
questionScore : {
require : "required",
number : "shoule be number",
min : "mininum value is 1"
},
totalScore : {
require : "required",
number : "shoule be number"
},
passCriteria : {
require : "required",
number : "please input number"
}
}
});