1. 程式人生 > >JQuery輸入驗證外掛(使用layer的tips做提示)

JQuery輸入驗證外掛(使用layer的tips做提示)

重大更新

         1.優化部分演算法

         2.支援行內元素校驗定義

         3.js新增元素,可新增定義事件

                    內附詳細教程

          日期:2018-9-18

-------------------------------------------------------------分界線----------------------------------------------------------------------------------------------------------

如題,使用layer錯誤提示,那麼layer使用的jquery的的要求是1.10以上版本,

所以使用的jQuery的的為1.10.0

支援:文字框,單選框,多選框,下拉框驗證,文字域

如果需要詳細用法,請檢視文章後部分

效果圖:

驗證功能,

游標離開驗證,資料儲存驗證

使用示例頁面

<html>
    <head>
        <title>測試外掛文字</title>
    </head>
    <body>
        <br>
        <br>
        名稱:<input type="text" id="name" ><br/>
        密碼:<input type="password" id="password" ><br/>
        職業:<select id="textselect">
            <option ></option>
            <option value="1">士</option>
            <option value="2">農</option>
            <option value="3">工</option>
            <option value="4">商</option>
        </select><br/>
        性別: <input name="sex" type="radio" value="1">男
        <input name="sex" type="radio" value="2">女<br/>
        證件型別:<input name="cardType" type="checkbox" value="1">軍官證
        <input name="cardType" type="checkbox" value="2">身份證
        <input name="cardType" type="checkbox" value="3">戶口本
        <input name="cardType" type="checkbox" value="4">護照<br/>
        <input type="button" id="saves" value="儲存">
        <script type="text/javaScript" src="../../js/jquery-1.10.1.min.js"  media="all"></script>
        <link href="../checkInput/css/layui.css"/>
        <script src="../checkInput/layui.all.js" ></script>
       
        <script type="text/javaScript" src="jQuery.checkinput.js"></script>
        <!-- <link rel="stylesheet" type="text/css" href="/Member/resources/css/checkstyle.css"> -->
        <script type="text/javaScript">
          
            $(function(){
                $(this)._initCheck([
                    {
                        selector:"#name",
                        checkType:["isInteger"],
                        message:"(必填)名稱只能為數字",
                        //以下可選
                        maxLength:10,
                        minLength:5,
                        isEmpty:false,
                        checkBefore:function(obj,opt,flg){
                            console.log("這是呼叫之前執行的方法");
                            console.log(obj,opt,flg);
                            
                        },
                        checkAfter:function(obj,opt,flg){
                            console.log("這是呼叫之後執行的方法");
                            console.log(obj,opt,flg);
                        },
                        cheCallback:function(obj,opt,flg){
                            console.log("驗證時:這是在驗證時呼叫的回撥函式方法");
                            console.log(obj,opt,flg);
                            return flg;
                        }
                    },{
                        selector:"#password",
                        isEmpty:false,
                        checkType:["isAnyChar"],
                        message:"除特殊符號外的任意字元",
                    },{
                        selector:"#textselect",
                        isEmpty:false,
                        checkType:["isInteger"],
                        message:"請選擇一項作為您的職業",
                    },{
                        selector:'[name="sex"]',
                        isEmpty:false,
                        checkType:["isInteger"],
                        message:"請選擇性別",
                    },{
                        selector:'[name="cardType"]',
                        isEmpty:false,
                        checkType:["isInteger"],
                        message:"證件型別不能為空",
                    }

                ],function(obj,type,flg){
                   
                });
            },[{path:"../layer.min.js",type:'js'}]);
            
            $("#saves").click(function () { 
                alert($(this)._saveChe());
            });
        </script>
    </body>
</html>

使用的CSS(jquery.checkstyle.css)


.form-error {opacity: 0.87;position: absolute;display: block;text-align: left;cursor: pointer;z-index: 9999;}
/*left*/
.form-error .form-error-content {user-select: none;position: relative;width: 100%;min-width: 80px; padding: 4px 10px; border: 2px solid #FFC107; border-radius: 6px;  background-color: #ff9800;  box-shadow: 0 0 6px #FF5722;  color: #fff;  font: 12px/18px "\5b8b\4f53",Tahoma;}
.form-error .form-error-arrow {user-select: none; position: relative; margin: -2px 0 0 13px; width: 15px; }
.form-error .form-error-arrow div {display: block; height: 1px;margin: 0 auto;border-right: 2px solid #FFC107;border-left: 2px solid #FFC107;background-color: #ff9800;box-shadow: 0 2px 3px #FF5722;font-size: 0;font-size: 0;line-height: 0;}
.form-error .form-error-arrow .line10{width:15px;border:0;}
.form-error .form-error-arrow .line9{width:13px;border:0;}
.form-error .form-error-arrow .line8{width:11px;}
.form-error .form-error-arrow .line7{width:9px;}
.form-error .form-error-arrow .line6{width:7px;}
.form-error .form-error-arrow .line5{width:5px;}
.form-error .form-error-arrow .line4{width:3px;}
.form-error .form-error-arrow .line3{width:1px;border-right:2px solid #FFC107;border-bottom:0 solid #FFC107;border-left:2px solid #FFC107;}
.form-error .form-error-arrow .line2{width:3px;border:0;background-color:#ddd;}
.form-error .form-error-arrow .line1{width:1px;border:0;background-color:#ddd;}
/*right*/
.form-error .form-error-arrow-right{user-select: none;border: 1px solid #ffa622;width: 27px; height: 27px;border-radius: 50%;float: left;text-align: center;color: red;font-size: 16pt;}
.form-error .form-error-content-right {user-select: none;position: relative;width: 100%;min-width: 80px; padding: 4px 10px; border: 2px solid #FFC107;border-radius: 6px; background-color: #ff9800; box-shadow: 0 0 6px #FF5722; color: #fff; font: 12px/18px "\5b8b\4f53",Tahoma;  margin-left: 30px;}


.layui-layer-tips {
	background: 0 0;
	box-shadow: none;
	border: none
}

.layui-layer-tips .layui-layer-content {
	position: relative;
	line-height: 22px;
	min-width: 12px;
	padding: 8px 15px;
	font-size: 12px;
	_float: left;
	border-radius: 2px;
	box-shadow: 1px 1px 3px rgba(0,0,0,.2);
	background-color: #FF9800;
	color: #fff
}

.layui-layer-tips .layui-layer-close {
	right: -2px;
	top: -1px
}

.layui-layer-tips i.layui-layer-TipsG {
	position: absolute;
	width: 0;
	height: 0;
	border-width: 8px;
	border-color: transparent;
	border-style: dashed;
	*overflow: hidden
}

.layui-layer-tips i.layui-layer-TipsB,.layui-layer-tips i.layui-layer-TipsT {
	left: 5px;
	border-right-style: solid;
	border-right-color: #ff9800
}

.layui-layer-tips i.layui-layer-TipsT {
	bottom: -8px
}

.layui-layer-tips i.layui-layer-TipsB {
	top: -8px
}

.layui-layer-tips i.layui-layer-TipsL,.layui-layer-tips i.layui-layer-TipsR {
	top: 5px;
	border-bottom-style: solid;
	border-bottom-color: #ff9800
}

.layui-layer-tips i.layui-layer-TipsR {
	left: -8px
}

.layui-layer-tips i.layui-layer-TipsL {
	right: -8px
}

使用JS(layer.all.js)

校驗外掛程式碼(jquery.checkinput.js)

/**
 * 依賴項: 需引入jQuery檔案,jquery版本在1.10以上(layui.js要求jquery版本在1.10.0以上)		 (需要手動引用,且必須在當前js外掛之前)
 * 		  和引入checkstyle.css檔案 (預設已經引入,需要注意引入路徑問題)
 * 		  和引入layui.js檔案       (預設已經引入,需要注意引入路徑問題)
 * 作  者: jpw
 * 日  期: 2018-8-27 18:17:15
 * 描  述: 校驗使用者輸入資訊
 */

;
//閉包限定名稱空間
(function($){
    //擴充套件jquery 方法
    $.fn.extend({
        /**
         * 根據定義的校驗資訊進行校驗資訊
         * @param optionArrays:   需要驗證的引數配置,詳情參考下文defaults物件, 形如
                                                    [{
                                                            selector:"#name",
                                                            isEmpty:false,
                                                            checkType:["notNull","isChinese"],
                                                            message:"(必填)請輸入使用者名稱稱,名稱只能為漢字"
                                                            checkBefore:function(obj,opt,flg){
                                                                console.log("這是呼叫之前執行的方法");
                                                                alert("這是呼叫之前執行的方法");
                                                                console.log(obj,opt,flg);
                                                            },
                                                            checkAfter:function(obj,opt,flg){
                                                                console.log("這是呼叫之後執行的方法");
                                                                console.log(obj,opt,flg);
                                                                alert("這是呼叫之後執行的方法");
                                                            },
                                                            cheCallback:function(obj,opt,flg){
                                                                console.log("這是回撥函式的方法");
                                                                console.log(obj,opt,flg);
                                                                alert("這是回撥函式的方法");
                                                            }
                                                        },
                                                        {....},
                                                         ....
                                                    ]

         
         * @param  resultsFn:      驗證操作完成時執行的回撥函式。回撥函式返回引數: (驗證元素,驗證引數,驗證結果)
         * @param  initFileArray:  初始化檔案的陣列配置  形如:[{path:"./style.css",type:'css'},{path:"https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js",type:'js'}]
         */
        
        "_initCheck":function(optionArrays,resultsFn,initFileArray){
            
            //初始化需要的檔案
            $._initExtendFile(initFileArray||[]);
            
            $.each(optionArrays,function(index,options){
                var _defaultOpts = $.extend({}, defaults, options); // 覆蓋外掛預設引數
                var _selector=_defaultOpts["selector"];

                var opts=chedefaultCache[_selector]=chedefaultCache[_selector]||_defaultOpts;
                var $dom=$(_selector);
               
               
                //註冊游標進入事件
                // $dom.focus(function(){
                //     var val=$dom.val();
                // });

                //註冊游標離開事件 游標離開進行資料驗證
                $dom.blur(function(){
                    var flg= checkVal($dom);
                    var _selector=$dom["selector"];
                    var opts=chedefaultCache[_selector];
                    if(typeof resultsFn=="function"){
                        flg= resultsFn($dom,opts,flg)
                    }
                    return flg;
                });

                var cs=opts["checkCss"];
                (typeof cs=="string"&&cs!=undefined)&&(cs=eval("("+cs+")"));
                (cs!=undefined)&&($dom.css(cs));

            });

        },
        /**
         * 儲存校驗
         * @param  resultsFn ($dom【元素物件】,opts【元素校驗配置引數】,flg【返回結果】)   
         * 校驗元素完成返回結果之前執行 【回撥函式】
         */
        "_saveChe":function(resultsFn){
            var flg=true;
            for(var _selector in chedefaultCache){
                var $dom=$(_selector);
                if($dom==null||$dom==undefined){
                     continue;
                }
                flg= checkVal($dom);
                if(flg==false){
                    return false;
                }
                var opts=chedefaultCache[_selector];
                if(typeof resultsFn=="function"){
                    flg= resultsFn($dom,opts,flg)
                }
            }
            return flg;
        }
    });
    
    /**
     * 校驗資料
     * @param {要校驗的元素物件} $dom 
     */
    var checkVal=function($dom){
        //判斷元素狀態,如果隱藏則不驗證
        if(!$dom.is(':visible')||$dom.is(':hidden')){
            return true;
        }

        var _select=$dom["selector"];
        var _opts=chedefaultCache[_select];
        var before=_opts["checkBefore"];
        (typeof before=="function")&&(before($dom,_opts,flg));

        var valList=$._getVal($dom);
        var val=valList[0];
        var msg="";
        var flg=true;
        var _cheCall=_opts["cheCallback"];
        if((_opts["isEmpty"]&&val=="")||(typeof val=="object"&&val.length<=0&&_opts["isEmpty"])){
            flg=true;
        }else{
            if((!_opts["isEmpty"]&&val=="")||(!_opts["isEmpty"]&&typeof val=="object"&&val.length<=0)){
                flg=false;
                msg=valList[1]=="select"?"您還沒有選擇,請選擇!"
                :valList[1]=="radio"?"請選擇一項!"
                :valList[1]=="checkbox"?"請最少選中一個!"
                :"必填項,不能為空!";
            }else{
                if(typeof val=="string"){
                    //校驗長度
                	var cheType=_opts["checkType"];
                    max=_opts["maxLength"],min=_opts["minLength"];
                    var cheTypeStr=cheType.join(',');
                    if(cheTypeStr.indexOf("isInteger")>=0||cheTypeStr.indexOf("isDouble")>=0){
                    	if(parseFloat(val)>max||parseFloat(val)<min){
                    		flg=false;
                    		msg="輸入數介於"+min+"-"+max+"之間";
                    	}
                    }else{
                    	if(val.length>max||val.length<min){
                    		flg=false;
                    		msg="請輸入 "+(min==max?min:(min+"-"+max))+" 位字元";
                    	}
                    }
                    if(flg){
                        for(var i=0;i<cheType.length;i++){
                            var fun=cheType[i];
                            if(_cheType[fun]!=undefined){
                                flg=_cheType[fun](val,function(_val,_flg){
                                    (typeof _cheCall=="function")&&(_flg=_cheCall($dom,_opts,_flg))
                                    return _flg;
                                });
                                if(flg==false)   break;
                            }else{
                            	console.log("沒有找到驗證規則中包含:"+fun);
                            }
                        }
                    }
                }
            }
        }
        
        
                    
        //使用定義的樣式顯示錯誤資訊
        if(flg){
            $._cheSuccess($dom,_opts["showType"],flg,val,msg==""?_opts["message"]:msg);
        }else{
            $._cheError($dom,_opts["showType"],flg,val,msg==""?_opts["message"]:msg);
        }
        var after=_opts["checkAfter"];
        (typeof after=="function")&&(after($dom,_opts,flg));

        return flg;
    }

    /**
     * 快取校驗的配置資訊
     */
    var chedefaultCache={};

    /**
     * 校驗引數設定
     */
    var defaults={

        /**
         * (必填)選擇器 和 jquery選擇器用法相同 ,支援 #id / .class / div div:eq(2)等 【字串】
         * 
         */
        selector:"",
       
        /**
         * (必填)提示文字 【字串】
         */
        message:"輸入非法,請重新輸入",

        /**
         * (推薦使用)校驗規則一組校驗規則 【陣列】
         */
        checkType:[],
        
        /**
         * 顯示方式  1,2,3,4 上右下左四個方向 【標識字元】
         */
        showType:2,
        
        /**
         * 最大長度 預設為18 【數字型別】
         */
        maxLength:18,
        
        /**
         * 最小長度 預設為0 【數字型別】
         */
        minLength:0,

        /**
         * 是否允許為空 true or false  【bool型別】
         */
        isEmpty:false,

        /**
         * 校驗之前執行 的方法  【函式】
         */
        checkBefore:null,

        /**
         * 校驗之後執行 的方法 【函式】
         */
        checkAfter:null,

        /**
         * 回撥函式 ;在執行每個校驗規則時執行  【函式】
         */
        cheCallback:null,
        
        /**
         * 定義需要校驗元素的樣式 ,在初始化時處理元素樣式  【鍵值物件】
         */
        checkCss:{},
        
       
    };


    /**
     * 定義校驗規則
     */
    var _cheType={
        /**
         * 私有處理方法
         */
        __regexVal:function(regex,val,callback){
            var flg=regex.test(val);
            if(typeof callback=="function"){
               flg= callback(val,flg);
            }
            return flg;
        },
        /**
         * 不為空
         * @param val 值
         * @param callback 回撥函式
         */
        notNull:function(val,callback){
            val=val.replace(/^\s/g,"").replace(/\s¥/g,"");
            var flg=val.length>0;
            if(typeof callback=="function"){
                callback(val,flg);
            }
        },

        /**
         * 小數型別(1位小數) 0.1~999999999999999999.9
         * @param callback 回撥函式
         */
        isDouble1:function(val,callback){
            regex=/^[0-9]{1,18}[.]?[0-9]{0,1}$/;
            return this.__regexVal(regex,val,callback);
        },
        /**
         * 小數型別(2位小數) 0.01~999999999999999999.99
         */
        isDouble2:function(val,callback){
            regex=/^[0-9]{1,18}[.]?[0-9]{0,2}$/;
            return this.__regexVal(regex,val,callback);
        },
        /**
         * 小數型別(3位小數) 0.001~999999999999999999.999
         */
        isDouble3:function(val,callback){
            regex=/^[0-9]{1,18}[.]?[0-9]{0,3}$/;
            return this.__regexVal(regex,val,callback);
        },
        /**
         * 小數型別(4位小數) 0.0001~999999999999999999.9999
         */
        isDouble4:function(val,callback){
            regex=/^[0-9]{1,18}[.]?[0-9]{0,4}$/;
            return this.__regexVal(regex,val,callback);
        },
        /**
         * 小數型別(5位小數) 0.00001~999999999999999999.99999
         */
        isDouble5:function(val,callback){
            regex=/^[0-9]{1,18}[.]?[0-9]{0,5}$/;
            return this.__regexVal(regex,val,callback);
        },
        /**
         * 小數型別(6位小數) 0.000001~999999999999999999.999999
         */
        isDouble6:function(val,callback){
            regex=/^[0-9]{1,18}[.]?[0-9]{0,6}$/;
            return this.__regexVal(regex,val,callback);
        },
        
        /**
         *整數 1-18位
        */
        isInteger:function(val,callback){
            regex=/^[0-9]{1,18}$/;
            return this.__regexVal(regex,val,callback);
        },
        
        /**
         * 大小寫 1-18位 
         */
        isLetter:function(val,callback){
            regex=/^[a-zA-Z]{1,18}$/;
            return this.__regexVal(regex,val,callback);
        },
        
                
        /**
         * 大寫 1-18位 
         */
        isUpperLetter:function(val,callback){
            regex=/^[A-Z]{1,18}$/;
            return this.__regexVal(regex,val,callback);
        },
        /**
         * 小寫 1-18位 
         */
        isLowerLetter:function(val,callback){
            regex=/^[a-z]{1,18}$/;
            return this.__regexVal(regex,val,callback);
        },
        /**
         * 手機號
         *  聯通現有號段是:130、131、132、155、156、186、185,其中3G專屬號段是:186、185。還有無線上網絡卡專屬號段:145。
            移動現有號段是:134、135、136、137、138、139、150、151、152、157、158、159、182、183、188、187。
            電信現有號段是:133、153、180、181、189。
        */
        isPhone: function (val,callback) {
            //130','131','132','133','134','135','136','137','138','139','145','150','151','152','153','155','156','157','158','159','180','181','182','183','185','186','187','188','189','170,6,7,8','1907'
            regex = /^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/;
            regex1 = /^0(([1,2]\d)|([3-9]\d{2}))\d{7,8}$/;
            return this.__regexVal(regex,val,callback) ||this.__regexVal(regex1,val,callback);
        },
        /**
         * 郵件
         */
        isEmail: function (val,callback) {
            regex = /\w+[@]\w+(\.\w+){1,2}/;
            return this.__regexVal(regex,val,callback);
        },
        
        /**
         * 中文字元
         */
        isChinese: function (val,callback) {
            regex = /^[\u4e00-\u9fa5]+$/;
            return this.__regexVal(regex,val,callback);
        },
        /**
         *除特殊符號外的任意字元
         */
        isAnyChar:function(val,callback){
            regex = /[\?\!\@\#\$\%\^\&\*\(\)\_\+\{\}\:\"\|\>\?\<-\=\[\]\;\'\\\/\.\,\`\~\!\@\#\¥\%\…\…\&\*\(\)\—\—\+\{\}\:\“\|\《\》\?\;\‘\、\,\。\、\【\】]/;
            return !this.__regexVal(regex,val,callback);
        },
         /**
         *除特殊符號外的任意字元
         */
        isText:function(val,callback){
            regex = /[\\]/;
            return !this.__regexVal(regex,val,callback);
        }
    };

    //快取錯誤資訊的html字元
    var errorMsgHtml={}

    /**
     * 擴充套件jQuery物件本身,定義錯誤成功提示資訊
     * 可從外部重寫
     */
    $.extend({
        /**
         * 成功處理方法
         */
        "_cheSuccess": function (obj,showType,flg,val,msg) {
        	var _select=$(obj)["selector"].replace(/'/g,"\'").replace(/"/g,"\'");
        	_select=_select==""?"[name='"+$(obj).attr("name")+"']":_select;
            var tip=errorMsgHtml[_select];
            if(tip!=null){
                layer.close(tip)
            }
            $(obj)[0].style["border"]="1px solid #ccc";
            $(obj)[0].style["backgroundColor"]="white";
            return flg;
        },
         /**
         * 錯誤處理方法
         */
        "_cheError": function (obj,showType,flg,val,msg) {
        	
        	//使用layui的 tips
    		var _select=$(obj)["selector"].replace(/'/g,"\'").replace(/"/g,"\'");
    		_select=_select==""?"[name='"+$(obj).attr("name")+"']":_select;
            var tip=errorMsgHtml[_select];
            if(tip!=null){
                layer.close(tip)
            }
            var tip=layer.tips(msg,$(obj)["selector"], {time:0,tips: [showType,'#ff9800'],tipsMore: true });
            errorMsgHtml[_select]=tip;
            $(obj)[0].style["border"]="1px solid #ff9800";
            $(obj)[0].style["backgroundColor"]="#f8f2e3";
            return flg;
        },
        /**
         * 初始化載入js,css檔案
         *@param 形如 fileArray  [{path:"./style.css",type:'css'}]
         */
        "_initExtendFile":function(fileArray){
            var optFile=[
            	 {path:"/Member/resources/css/jquery.checkstyle.css",type:'css'},
                 {path:"/Member/resources/js/checkInput/layui.all.js",type:'js'}, 
            ];
            if(fileArray!=undefined&&fileArray!=null){
                 optFile=$.extend({},optFile,fileArray);
            }
            $.each(optFile,function(index,item){
                var type=item["type"];
                if(type=="js"){
                   $.getScript(item["path"]);
                }else{
                    $('head').append('<link rel="stylesheet" type="text/css" href="'+item["path"]+'">');
                }
            });
            
        },
        /**
         * 定義得到函式值得方法
         * @param {要獲取資料的jQuery物件,非DOM物件} $obj
         */
        "_getVal":function($obj){
            var type=$obj.prop("tagName")||$obj.type;
            type=type.toLocaleLowerCase();
            (type=="input")&&(type=$obj.attr("type"));
            var val;
            switch (type) {
                case "radio":
                    var name=$obj.attr("name");
                    val=$("[name='"+name+"']:checked").val();
                    break;
                case "checkbox":
                    val=[];
                    var name=$obj.attr("name");
                    var nameDom=$("[name='"+name+"']");
                    for(var i=0;i<nameDom.length;i++){
                        if(!nameDom[i].checked){continue;}
                        val.push(nameDom[i].value);
                    }
                    break;
                default:
                    val=$obj.val();
                    break;
            }
            (typeof val=="string")&&(val=val.replace(/^\s/g,"").replace(/\s$/g,""));
            (val==undefined)&&(val="");
            return [val,type];
        }


    });



})(window.jQuery);


詳細用法

一。用前準備

1.儲存上文的CSS內容,檔名為:jquery.checkstyle.css

2.下載layer.all.js檔案檔名為:layui.all.js

3.儲存外掛的JS程式碼,檔名為:jquery.checkinput.js

4.下載的jquery.js檔案,檔名為:jquery.1.10.1.min.js

二。開始使用

1.新建一個的的test.html檔案

2.將以上檔案拷貝到同一個目錄

3.在HTML檔案中引入jQuery的檔案和jquery.checkinput.js

 <script type="text/javaScript" src="jQuery.1.10.1.min.js"></script>
 <script type="text/javaScript" src="jQuery.checkinput.js"></script>

這樣外掛就已經引入進來了,樣式檔案在外掛中已經預設引入。在這之後,你也可以在外部重新定義預設引入檔案,如下

 $._initExtendFile([
                    {path:"jquery.checkstyle.css",type:'css'},
                    {path:"layui.all.js",type:'js'}
                ])

3.輸入框輸入型別='文字'輸入型別='密碼'判斷

         一,建立在test.html中的頁面中建立輸入文字框

 <input type="text" id="name" ><br/>

         二,初始化需要驗證的資訊

var check=[
                {
                        selector:"#name", //外掛驗證的選擇器,和jquery用法一致
                        checkType:["isInteger"], //配置驗證規則
                        message:"(必填)名稱數字", //配置驗證不通過的提示資訊
                        //以下可選
                        maxLength:10, //輸入最大長度,預設為18
                        minLength:5, //輸入最小長度,預設為5
                        isEmpty:false, //是否為空,預設為false
                        //在進行校驗資料之前執行的回撥函式
                        checkBefore:function(obj,opt,flg){ 
                            console.log("這是呼叫之前執行的方法");
                            console.log(obj,opt,flg);
                            
                        },
                        //在進行校驗資料之後執行的回撥函式
                        checkAfter:function(obj,opt,flg){
                            console.log("這是呼叫之後執行的方法");
                            console.log(obj,opt,flg);
                        },
                        //在資料校驗完成之後執行的回撥函式
                        cheCallback:function(obj,opt,flg){
                            console.log("驗證時:這是在驗證時呼叫的回撥函式方法");
                            console.log(obj,opt,flg);
                            return flg;
                        }
                    }

                ];

 //這裡的this最好選擇小的範圍,比如當前的form $("[name='form']")._initCheck()
 $(this)._initCheck(); 

通常情況下我們只需要配置前面三個屬性即可如下

var check=[ {
                    selector:"#name",
                    checkType:["isInteger"],
                     message:"(必填)名稱只能為數字"
              }]

當前的檢查為一個數組,陣列內可存放多個需要校驗的資料

比如,在test.html中的頁面中假如密碼框


        <input type="password" id="password" ><br/>

驗證名稱和密碼只需要如下配置即可

var check=[
     {
        selector:"#name",
        checkType:["isInteger"],
        message:"(必填)名稱只能為數字"
     },
     {
        selector:"#password",
        isEmpty:false,
        checkType:["isAnyChar"],
        message:"除特殊符號外的任意字元",
    }
]

       角配置完成之後呼叫$(“[名稱='形式']”)._ initCheck()方法進行驗證

4.選擇框,下拉框,單選框,多選框,配置如上。

注:單選框,多選框,必須具備name屬性且選擇器只能為“ [name ='名稱'] ”的形式

5.錯誤成功提示修改,只需重新$ ._ cheSuccess(OBJ,showType,FLG,纈氨酸,MSG)$ ._ cheError(OBJ,showType,FLG,纈氨酸,MSG)方法即可

   方法引數解釋

obj:           當前驗證元素的jquery物件

showType:       顯示方式,約定為layer中tips的四個值     1,2,3,4 上右下左四個方向

val:            當前驗證元素的值,這個值已近做過處理,分別去掉了兩側空格,將多選框的值將返回一個數組,其他返回為字串

msg:            返回的錯誤提示資訊

例如,重新定義錯誤提示為彈框

 $._cheError=function(obj,showType,val,msg){
      alert(msg);
 }

6.校驗引數詳解,具體可以參考jquery.checkinput.js檔案,具備詳細的註釋

/**
     * 校驗引數設定
     */
    var defaults={

        /**
         * (必填)選擇器 和 jquery選擇器用法相同 ,支援 #id / .class / div div:eq(2)等 【字串】
         * 
         */
        selector:"",
       
        /**
         * (必填)提示文字 【字串】
         */
        message:"輸入非法,請重新輸入",

        /**
         * (推薦使用)校驗規則一組校驗規則 【陣列】
         */
        checkType:[],
        
        /**
         * 顯示方式  1,2,3,4 上右下左四個方向 【標識字元】
         */
        showType:2,
        
        /**
         * 最大長度 預設為18 【數字型別】
         */
        maxLength:18,
        
        /**
         * 最小長度 預設為0 【數字型別】
         */
        minLength:0,

        /**
         * 是否允許為空 true or false  【bool型別】
         */
        isEmpty:false,

        /**
         * 校驗之前執行 的方法  【函式】
         */
        checkBefore:null,

        /**
         * 校驗之後執行 的方法 【函式】
         */
        checkAfter:null,

        /**
         * 回撥函式 ;在執行每個校驗規則時執行  【函式】
         */
        cheCallback:null,
        
        /**
         * 定義需要校驗元素的樣式 ,在初始化時處理元素樣式  【鍵值物件】
         */
        checkCss:{},
        
       
    };

7.儲存校驗$(“[name ='form']”)._ saveChe();

var  flg=$("[name='form']")._saveChe();
alert(flg?"驗證通過","驗證不通過");

此方法會返回一個布林型別的變數,只需要判斷此變數即可。

8._initCheck引數方法介紹,詳情可參考jquery.checkinput.js檔案

/**
         * 根據定義的校驗資訊進行校驗資訊
         * @param optionArrays:   需要驗證的引數配置,詳情參考下文defaults物件, 形如
                                                    [{
                                                            selector:"#name",
                                                            isEmpty:false,
                                                            checkType:["notNull","isChinese"],
                                                            message:"(必填)請輸入使用者名稱稱,名稱只能為漢字"
                                                            checkBefore:function(obj,opt,flg){
                                                                console.log("這是呼叫之前執行的方法");
                                                                alert("這是呼叫之前執行的方法");
                                                                console.log(obj,opt,flg);
                                                            },
                                                            checkAfter:function(obj,opt,flg){
                                                                console.log("這是呼叫之後執行的方法");
                                                                console.log(obj,opt,flg);
                                                                alert("這是呼叫之後執行的方法");
                                                            },
                                                            cheCallback:function(obj,opt,flg){
                                                                console.log("這是回撥函式的方法");
                                                                console.log(obj,opt,flg);
                                                                alert("這是回撥函式的方法");
                                                            }
                                                        },
                                                        {....},
                                                         ....
                                                    ]

         
         * @param  resultsFn:      驗證操作完成時執行的回撥函式。回撥函式返回引數: (驗證元素,驗證引數,驗證結果)
         * @param  initFileArray:  初始化檔案的陣列配置  形如:[{path:"./style.css",type:'css'},{path:"https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js",type:'js'}]
         */
         function _initCheck(optionArrays,resultsFn,initFileArray)

有興趣的朋友可以借鑑,如果轉載請指明出處。

如果使用外掛,請註明原創者

如果修改外掛,請釋出修改後的版本,讓此外掛更加完善,生態。