基于jQuery和bootstrap的表单校验插件

基于jQuery和bootstrap的表单校验插件

刚工作的菜鸟一枚,因为工作需要写个了对表单校验的插件,希望对大家有所帮助,欢迎批评指正,github地址

  • 有两种转入参数的方式,可以直接传入js或jQuery对象或id或name–(TelCheck),传入多个元素的话可以直接放在数组里,或者复杂点加上各种回调函数和长度限制(NeedNullCheck)
  • 这个js里还有其他项目中用到的方法,大家可以参考,或者无视0.0
$.formCheck({
    NeedNullCheck: {
        Dom: "OWNERNAME",//可以为js或jQuery对象或id或name
        maxLength: 10,//小于等于最大长度
        minLength: 2,//大于等于最小长度
        //校验之前触发
        before: function (dom) {//dom为当前校验的元素
            return true;//当返回值为true时会阻止后续事件和默认事件的触发
        },
        //校验成功后触发
        success: function (dom) {
            return true;//当返回值为true时会阻止后续事件和默认事件的触发
        },
        //校验失败后触发
        fail: function (dom) {
            return true;//当返回值为true时会阻止后续事件和默认事件的触发
        },
        //校验之后触发
        after: function (dom) {

        },
        allChild: false//该dom节点下所有为text和textarea的input均校验并触发回调
    },
    TelCheck: $('#TEL'),//直接传入jQuery对象
    IDcardCheck: document.getElementById("ID_MGROWNER"),//直接传入js对象
    CodeCheck: "UnifiedSocialCreditCode",//根据id或name传入对象
    IntegerCheck: [$('#MGROWNER'), "ADDRESS"],//传入数组,内含对象或id或name
    testCheck: "name"//自定义校验规则
});
//自定义校验规则样例
function testCheck(object) {//object参数为当前校验对象
    //当返回值为"false"时表示校验通过,否则返回的字符串为校验的提示信息,注意这个"false"是字符串
    return object.val().trim() === "1" ? "该项不能为1" : "false";
}

 $.notValid()//检查当前页面所有元素,当返回为true时校验不通过,
 $.notValid({hidden: false})时不检查隐藏的元素
 $("#table").notValid()//检验该元素下的所有元素,当返回为true时校验不通过
 $("#Id").deleteCheck()//取消元素校验的效果,notValid方法也会忽略它
 $("#Id").addCheck()//对已取消的元素恢复校验

NeedNullCheck非空校验
phoneCheck电话号码
TelCheck固话
IDcardCheck身份证
IntegerCheck整数
FloatCheck数字
CodeCheck统一社会信用代码
EmailCheck邮箱
PostCodeCheck邮编
needCheckBox复选框
needRadio单选框

单选框和复选框需要把所有的input放到一个div里,把div的id传进去
基于jQuery和bootstrap的表单校验插件_第1张图片
就像这样

$.formCheck({needCheckBox: "FBMTLB"});

你可能感兴趣的:(基于jQuery和bootstrap的表单校验插件)