一、简介
官方地址:https://jqueryvalidation.org/
功能描述:前端表单的验证
二、校验规则
var validator = $("#form").validate({
debug: true, -> 调试模式开关
rules: { -> 校验规则集合
name: { -> 表单元素的NAME属性值
required: true, -> 必填
ignore:":hidden", -> 表单元素隐藏时忽略校验
minlength: 0, -> 最小长度
maxlength: 100, -> 最大长度
rangelength: [0, 100], -> 长度取值范围
range: [0, 100], -> 取值范围
min: 0, -> 最小值
max: 100, -> 最大值
email: true, -> 邮箱
url: true, -> 网络地址
date: true, -> 日期(泛型)
dateISO: true, -> 日期(规范)
number: true, -> 数字
digits: true, -> 整数
equalTo: "ID选择器", -> 对比两元素的值是否相等
remote: { -> AJAX远程校验
url: "/remote",
type: "POST",
data: {
name: function () {
return $("input[name=name]").val();
}
},
depends:function(){
return true; -> TRUE时执行校验,FLASE时不执行校验
},
}
},
},
messages: { -> 校验失败的错误提示
name: { -> 表单元素
required: "客户名称不能为空", -> 校验规则的提示
...,
},
},
submitHandler: function (form) {
验证通过后回调
},
invalidHandler: function (event, validator) {
验证不通过回调
},
highlight: function (element, errorClass, validClass) { ->元素高亮( INPUT)
$(element).addClass(errorClass).removeClass(validClass);
},
unhighlight: function (element, errorClass, validClass) { -> 元素不高亮(INPUT)
$(element).addClass(validClass).removeClass(errorClass);
},
success: function (label) { -> 校验成功
label.addClass("success");
},
showErrors: function (errorMap, errorList) { -> 显示校验错误信息
this.defaultShowErrors();
},
onsubmit: true, -> 表单提交时校验
onfocusout: true, -> 获取焦点时校验
onkeyup: true, -> 按键提起时校验
onclick: true, -> 鼠标点击时校验
focusInvalid: true, -> 未通过校验的表单是否获得焦点
focusCleanup: true, -> 未通过校验的元素获得焦点时，是否移除错误提示
errorClass: "fail", -> 校验错误时元素添加类名
validClass: "success", -> 校验正确时元素添加类名
});
三、对象方法
var boolean = $("#from").valid(); -> 返回表单校验结果
$object.rules(); -> 获取表单元素的校验规则
$object.rules("add",{min:0,max:100}); -> 表单元素添加校验规则
$object.rules("remove","min max"); -> 表单元素移除校验规则
var boolean = validator.form(); -> 返回表单校验结果
validator.element("ID选择器"); -> 返回表单元素的校验结果
validator.resetForm(); -> 重置表单
validator.numberOfInvalids(); -> 返回无效的表单元素的数量
validator.showErrors({name:'name',age:'age'}); -> 指定表单元素校验失败时显示的信息
var format = $.validator.format("{0}-{1}-{2}"); -> 格式化,接收传参
format('2019','01','01'); -> 2019-01-01
$.validator.setDefaults({debug:true}); -> 设置校验属性
$.validator.addClassRules({class:{min:0,max:100}}); -> 为携带指定类属性的表单元素添加校验规则
:filled -> 元素的内容被填写
:unchecked -> 元素没有被选中
:blank -> 元素的内容为空
四、自定义校验方法
$.validator.addMethod("method", function (value, element, params) {
return this.optional(element) || true; -> optional()元素值为空时返回TRUE
}, "message");
elements: function () { -> 校验规则在多个相同name的情况下默认只校验第一个(validate.min.js)
var b = this, c = {};
return a(this.currentForm).find("input, select, textarea")
.not(":submit, :reset, :image, [disabled]")
.not(this.settings.ignore)
.filter(function () {
return !this.name && b.settings.debug && window.console
&& console.error("%o has no name assigned", this),
// this.name in c || !b.objectLength(a(this).rules()) ? !1 : (c[this.name] = !0, !0)
c[this.name] = !0, !0 -> 注释上行代码,修改为当行代码,支持校验多个相同name
})
}
