verify.js 極簡表單校驗插件

cppowboy 發布于2019-08-21 10:41 / 3188人閱讀

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

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

(function(){
    // 校驗插件
    if(!$.fn.hasOwnProperty("verify")){
        $.fn.verify = function(config) {
            var fields = [], item;
            if (!config) return;
            // 判斷是否函數
            function isFunction(obj) {
                return !!(obj && obj.constructor && obj.call && obj.apply);
            }
            // 表單提交校驗(全部)
            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);
                // 將單個input事件對象追加到數組中，提交表單時遍歷執行                    
                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;
                    }
                };
                // 單個input元素注冊失焦事件
                field.on("blur", field.testValid);
            }
            // 遍歷對象
            for(item in config.fields) {
                process(config.fields[item], item)
            }
            // 提交按鈕注冊事件
            if (config.submitButton) {
                $(config.submitButton).click(handleSubmit);
            } else {
                this.on("submit", handleSubmit);
            }
            // 返回集合，供調用
            return fields;            
        }
    }    
})();

插件調用方法如下：

(function(){
    // 注冊校驗
    $("#register").verify({
        fields:{
            //選中名字字段，設置校驗規則
            "#register input[name="phone"]":{
                //錯誤提示信息
                message:"手機號碼格式不正確，請重新輸入",
                //校驗規則，返回布爾值，true則成功，false則失敗，可在此回調函數中插入您的業務邏輯，最終返回bool值就好，極方便
                test:function(val){
                    var reg = /^(1[3-8][0-9])d{8}$/;
                    return reg.test(val);
                }
            },
            "#register input[name="password"]":{
                message:"請輸入正確格式的密碼",
                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;
                    }
                }
            }                            
        },
        // 錯誤模板，設置裝載錯誤信息的容器，插入上面設置的錯誤提示信息
        errorTemplate:function(error){            
            return $("" + error.message + "");
        },
        //校驗成功后的回調方法，可插入校驗成功后要執行的邏輯代碼
        success:function(){
            //coding~~
        }        
        //表單提交按鈕，若未設置，則為默認的form.submit;
        submitButton: "#register .submit"   
    });          
})

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

下附傳送門，詳細測試demo請自行跳轉下載，不謝！
https://github.com/cloverso/verify

GPU云服務器云服務器表單校驗異步校驗表單 form表單校驗 bootstrap校驗表單

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86013.html

使用vue自定義指令開發一個表單驗證插件validate.js

摘要：今天就來介紹一下如何利用的自定義指令來開發一個表單驗證插件的過程。按照這種方式就能夠使用自己開發的這個表單校驗插件。這段時間在進行一個新項目的前期搭建，新項目框架采用vue-cli3和typescirpt搭建。因為項目比較輕量，所以基本沒有使用額外的ui組件，有時候我們需要的一些基礎組件我就直接自己開發了。今天就來介紹一下如何利用vue的自定義指令directive來開發一個表單驗證插件的過...

warnerwu 2019-05-23 17:26 評論0 收藏0
va.js——Vue 表單驗證插件的寫作過程

摘要：一表單驗證模塊的構成任何表單驗證模塊都是由配置校驗報錯取值這幾部分構成的。其實我是想寫個指令來完成表單驗證的事的。當然表單驗證這種是高度定制化的。前言前段時間，老大搭好了Vue的開發環境，于是我們愉快地從JQ來到了Vue。這中間做的時候，在表單驗證上做的不開心，看到vue的插件章節，感覺自己也能寫一個，因此就自己開始寫了一個表單驗證插件va.js。當然為什么不找個插件呢？ vu...

suosuopuo 2019-08-20 12:30 評論0 收藏0
JQuery填坑系列（二）：動態添加表單校驗失效問題

摘要：表單驗證用的插件，還用到了下拉列表相關的插件。沒想到，這其中暗暗地隱藏著一個個坑。于是看了一下插件的官方文檔，它提供了兩種方法，可以在表單元素上添加，刪除校驗規則。表單驗證用的jquery validation插件，還用到了下拉列表相關的插件selectize。有這樣一個功能，表單中一個下拉列表A的required屬性是根據另一個下拉列表B的選擇內容來動態變換的。于是想著根據B被選中...

LeviDing 2019-08-23 14:03 評論0 收藏0
巧用 Bootstrap的 popover插件實現表單校驗提示

摘要：瀏覽文檔，發現插件特別適合做表單校驗出錯的提示。因為使的非常頻繁，最近把它封住下，做成的插件。通過本插件，在標簽中定義好校驗正則錯誤信息即可。點擊提交時，如果有表單項目不合法，會阻止表單繼續提交。最后調整下，就實現了截圖的效果。最近的項目，用Bootstrap比較多。瀏覽Bootstrap文檔，發現 popover 插件特別適合做表單校驗出錯的提示。因為使的非常頻繁，最近把它封住下...

Corwien 2019-08-20 10:35 評論0 收藏0
css進階

摘要：柵格系統用于處理頁面多終端適配的問題。它表示抓取對象以后拖放到另一個位置。目前，它是標準的一部分。精簡高效的命名準則方法這篇文章發布于年月日，星期日，，歸類于相關。但是不會受到包含塊的限制，可能會溢出。一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 float 屬性不由...

import. 2019-08-29 14:07 評論0 收藏0