记录一下这个插件的用法,官网的例子命名不太好,走了很多弯路。弄个最常用的注册页面。
$("#regfrm").validate({
rules:{
"reg[email]": {
required: true,
email: true,
remote: {
url: _APP_+"/Index/canRegist",
type:'POST'
}
},
"reg[pwd]":{
required: true,
rangelength: [6,16]
},
"reg[rpwd]":{
required: true,
rangelength: [6,16],
equalTo: "#reg-pwd"
}
},
messages: {
"reg[email]": {
required: "请输入注册使用的邮箱地址",
email: "请输入正确的邮箱地址",
remote: "该邮箱已经注册过了"
},
"reg[pwd]":{
required: "请输入6-16位密码",
rangelength:"请输入6-16位密码"
},
"reg[rpwd]":{
required: "请输入6-16位确认密码",
rangelength: "请输入6-16位确认密码",
equalTo: "与上面的密码不一致,请重新输入"
}
}
});
该插件有class验证的功能,除了默认的class,可以对一个rule添加class验证(addClassRules( name, rules ))。还有inline的规则。但一般会使用上面的做法。
其中 re[email] 这些值来自 <input type="text" name="re[email]"> 的name,所以官网有说明,但是这个name很容易混淆,例子也很容易混淆。这样就清楚多了。
remote 是ajax用的,php端返回一个‘true’的字符代表通过验证。
下面添加一些常用的
jQuery.extend(jQuery.validator.messages, { required: "请填写此项", remote: "Please fix this field.", email: "请输入正确的邮箱地址", url: "Please enter a valid URL.", date: "Please enter a valid date.", dateISO: "Please enter a valid date (ISO).", number: "Please enter a valid number.", 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: jQuery.validator.format("Please enter no more than {0} characters."), minlength: jQuery.validator.format("Please enter at least {0} characters."), rangelength: jQuery.validator.format("Please enter a value between {0} and {1} characters long."), range: jQuery.validator.format("Please enter a value between {0} and {1}."), max: jQuery.validator.format("Please enter a value less than or equal to {0}."), min: jQuery.validator.format("Please enter a value greater than or equal to {0}.") }); $("#pgform").validate({ errorPlacement: function(error, element) { error.hide(); }, highlight: function(element, errorClass, validClass) { var $elm = $(element); if( $elm.is(':checkbox') || $elm.is(':radio') ){ $elm.closest('.form-items').addClass('forms-error'); }else{ $elm.addClass(errorClass); $elm.closest('.form-item').addClass('form-error'); } }, unhighlight: function(element, errorClass, validClass) { var $elm = $(element); if( $elm.is(':checkbox') || $elm.is(':radio') ){ $elm.closest('.form-items').removeClass('forms-error'); }else{ $elm.removeClass(errorClass); $elm.closest('.form-item').removeClass('form-error'); } } });
第一个是替换默认错误提示的文字,用在validate之前。valdate的配置是:
错误信息的位置显示,我弄成不显示信息。
错误高亮和正确高亮,这个可以弄很多不同的东西。我给父辈加了class。