verify.js 極簡(jiǎn)表單校驗(yàn)插件

cppowboy 發(fā)布于2019-08-21 10:41 / 3190人閱讀

摘要：這是一款極簡(jiǎn)潔的表單校驗(yàn)插件，僅行代碼，屬于半封裝模式，可任意編寫業(yè)務(wù)邏輯代碼，核心代碼如下校驗(yàn)插件判斷是否函數(shù)表單提交校驗(yàn)全部將單個(gè)事件對(duì)象追加到數(shù)組中，提交表單時(shí)遍歷執(zhí)行核心處理方法單個(gè)元素注冊(cè)失焦事件遍歷對(duì)象提交按鈕注冊(cè)事件返回集合，

這是一款極簡(jiǎn)潔的表單校驗(yàn)插件，僅50行代碼，屬于半封裝模式，可任意編寫業(yè)務(wù)邏輯代碼，核心代碼如下：

(function(){
    // 校驗(yàn)插件
    if(!$.fn.hasOwnProperty("verify")){
        $.fn.verify = function(config) {
            var fields = [], item;
            if (!config) return;
            // 判斷是否函數(shù)
            function isFunction(obj) {
                return !!(obj && obj.constructor && obj.call && obj.apply);
            }
            // 表單提交校驗(yàn)(全部)
            function handleSubmit() {
                var  i, errors = false, len = fields.length;
                for (i = 0; i < len; i++) {
                    if (!fields[i].testValid()) errors = true;
                }
                if (errors) return false;
                if (isFunction(config.success)) return config.success();
            }
            function process(opts, selector) {
                var field = $(selector),
                    error = {message: opts.message || ""},
                    errorEl = config.errorTemplate(error);
                // 將單個(gè)input事件對(duì)象追加到數(shù)組中，提交表單時(shí)遍歷執(zhí)行                    
                fields.push(field);
                // 核心處理方法
                field.testValid = function testValid() {
                    var temp, error, el = $(this), val = el.val();
                    error = !opts.test(val);
                    if (error) {
                        el.after(errorEl);
                        return false;
                    } else {
                        temp = errorEl.get(0);
                        temp.parentNode && temp.parentNode.removeChild(temp);
                        return true;
                    }
                };
                // 單個(gè)input元素注冊(cè)失焦事件
                field.on("blur", field.testValid);
            }
            // 遍歷對(duì)象
            for(item in config.fields) {
                process(config.fields[item], item)
            }
            // 提交按鈕注冊(cè)事件
            if (config.submitButton) {
                $(config.submitButton).click(handleSubmit);
            } else {
                this.on("submit", handleSubmit);
            }
            // 返回集合，供調(diào)用
            return fields;            
        }
    }    
})();

插件調(diào)用方法如下：

(function(){
    // 注冊(cè)校驗(yàn)
    $("#register").verify({
        fields:{
            //選中名字字段，設(shè)置校驗(yàn)規(guī)則
            "#register input[name="phone"]":{
                //錯(cuò)誤提示信息
                message:"手機(jī)號(hào)碼格式不正確，請(qǐng)重新輸入",
                //校驗(yàn)規(guī)則，返回布爾值，true則成功，false則失敗，可在此回調(diào)函數(shù)中插入您的業(yè)務(wù)邏輯，最終返回bool值就好，極方便
                test:function(val){
                    var reg = /^(1[3-8][0-9])d{8}$/;
                    return reg.test(val);
                }
            },
            "#register input[name="password"]":{
                message:"請(qǐng)輸入正確格式的密碼",
                test: function (val) {
                    if (!val) return false;
                    var reg = /^[a-zA-Z0-9]{6,20}$/;
                    return reg.test(val);
                }
            },
            "#register input[name="repassword"]":{
                message:"兩次密碼輸入不一致！",
                test:function(val){
                    var password = $("input[name="password"]").val();
                    if(password != val) {
                        return false;
                    } else {
                        return true;
                    }
                }
            }                            
        },
        // 錯(cuò)誤模板，設(shè)置裝載錯(cuò)誤信息的容器，插入上面設(shè)置的錯(cuò)誤提示信息
        errorTemplate:function(error){            
            return $("" + error.message + "");
        },
        //校驗(yàn)成功后的回調(diào)方法，可插入校驗(yàn)成功后要執(zhí)行的邏輯代碼
        success:function(){
            //coding~~
        }        
        //表單提交按鈕，若未設(shè)置，則為默認(rèn)的form.submit;
        submitButton: "#register .submit"   
    });          
})

原本是想在插件內(nèi)封裝一些固定的表單校驗(yàn)方法，但后來(lái)發(fā)現(xiàn)各種業(yè)務(wù)需求千奇百怪，簡(jiǎn)直眾口難調(diào)，固以此方式呈現(xiàn)，只封裝通用的校驗(yàn)流程，業(yè)務(wù)邏輯自行穿插，美其名曰：”半封裝“，具體優(yōu)劣各位看官自行研究了，當(dāng)然，更希望您能夠分享自己的見(jiàn)解～～

下附傳送門，詳細(xì)測(cè)試demo請(qǐng)自行跳轉(zhuǎn)下載，不謝！
https://github.com/cloverso/verify