JQuery Validator

一、简介

官方地址: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
  })
}