validate表单验证

一、完善的配置

"VALIDATION_OPTION": function(){
return {
onfocusout: function(element) {
$(element).closest('.form-group').removeClass('has-error');
$(element).valid();
},
onkeyup: function(element) {
$(element).closest('.form-group').removeClass('has-error');
$(element).valid();
},
onclick:function(element) {
$(element).closest('.form-group').removeClass('has-error');
$(element).valid();
},
errorElement: 'div',
errorClass: 'help-block has-error',
highlight: function (error,element) {
$(error).closest('.form-group').addClass('has-error');
},
errorPlacement: function(error, element) {
element.popover({
content:error.outerHTML(),
html:true,
placement:"bottom",
trigger:"focus"
});
},
success: function (error,element) {
$(element).popover('destroy');
$(error).closest('.form-group').removeClass('has-error');//.addClass('has-info');
},
messages : {
"required" : "此项为必填.",
"email" : "请输入一个合法的email地址",
"url" : "请输入一个合法的url地址.",
"date" : "请输入一个合法的日期.",
"number" : "请输入一个合法的数字.",
"digits" : "请输入一个正整数.",
"mobile" : "请输入一个合法的手机号码",
"phone" : "请输入一个合法的电话号码",
"pwd" : "密码只能是6-16位的数字字母下划线的组合.",
"isDate" : "请输入正确的日期(格式为xxxx-xx-xx)",
"maxlength": $.validator.format("此项最多只能输入{0}个字符"),
"minlength": $.validator.format("此项至少需要输入{0}个字符"),
"rangelength": $.validator.format("此项需要输入{0}到{1}个字符"),
"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}.")
}
};
},

　　

$.validator.addMethod("mobile",function(value,element){
if( !value )return true;
return /^(?:13|15|17|18)[0-9]{9}$/.test(value);
});

$.validator.addMethod("pwd",function(value,element){
var a = /^[a-zA-Z_0-9]{6,16}$/.test(value);
return /^[a-zA-Z_0-9]{6,16}$/.test(value);
});

$.validator.addMethod("phone",function(value,element){
if( !value )return true;
return /^(?:[0-9]{3,4}-)?[0-9]{7,8}$/.test(value);
});
$.validator.addMethod("digits",function(value,element){
if( !value )return true;
return this.optional(element) || /^\d+$/.test(value);
});
$.validator.addMethod("number",function(value,element){
if( !value )return true;
return this.optional(element) || /^\d+(\.\d+)?$/.test(value);
});

$.validator.addMethod("isDate", function(value, element){
if( !value )return true;
var ereg = /^(\d{1,4})(-)(\d{1,2})(-)(\d{1,2})$/;
var r = value.match(ereg);
if (r == null) return false;
var d = new Date(r[1], r[3] - 1, r[5]);
var result = (d.getFullYear() == r[1] && (d.getMonth() + 1) == r[3] && d.getDate() == r[5]);
return this.optional(element) || (result);
},"请输入正确的日期(格式为xxxx-xx-xx)");

$.validator.messages = $.extend($.validator.messages,Const.VALIDATION_OPTION().messages);

注意：1、后续方法中的 if( !value )return true; 代码可以完成如果输入可以为空，在未输入值或者值被清空时，不会验证

　　　2、 onfocusout、onkeyup、onclick三个参数的配置可以确保输入框值变化的时候进行验证，避免上一次验证的结果残留下来

　　 3、isDate时间格式判断的时候，会与其他的时间插件冲突，导致错误提示不会出现