[無心插柳]簡單實現常用的表單校驗函數

BingqiChen 發布于2019-08-23 13:03 / 2839人閱讀

摘要：但當時想著就是簡單的校驗，沒必要引插件，就自己寫一個簡單的函數。隨著校驗的需求多樣化，函數越來越大。提供了常用的校驗規則，需要的可以擴展。

有意取而不得，失落而歸。無意間有所獲，未有喜悅，但珍惜依舊

1.前言

表單校驗，相信絕大部分的開發者會遇到過，網上也有很多插件可使用。但當時想著就是簡單的校驗，沒必要引插件，就自己寫一個簡單的函數。隨著校驗的需求多樣化，函數越來越大。有點輪子的雛形，算是無心插柳吧。現在也該分享出來了，和大家交流交流。函數比較粗糙，如果大家有建議，評論留言吧。

1.關于實現的過程，原理都是參考了《JavaScript設計模式與開發實踐》策略模式的一個例子。代碼比較簡單，大家移步到文末的鏈接，下載相關的文件，運行調試下就會知道是當中的奧秘了。這里就不做過多的介紹，只展示出可以應付哪些校驗場景和使用的方法。

2.雖然我開發項目中會使用這個函數，但今天的文章，主要是出于分享和交流學習，介紹下這種表單校驗的方式。目前函數比較粗糙，功能不夠強大，待完善，在項目中使用要注意謹慎。

3.文章例子依賴 vue ，只為了方便展示，該函數為原生 js 函數。

2.表單校驗的場景

首先，簡單列舉下表單校驗的常用場景

2-1.基礎數據校驗

關于下面調用的規則：rule，全部封裝在這個文件下面的ruleData這個變量這里。一看就知道怎么回事了。提供了常用的校驗規則，需要的可以擴展。

調用代碼


    
    
        
        {{demo1.tips.userName}}
        
        {{demo1.tips.userContact}}

new Vue({
    el: "#form-box",
    data: {
        demo1: {
            userName: "",
            userContact: "",
            tips: ""
        }
    },
    methods: {
        handleSubmit1(){
            let _this = this;
            let _tips=ecValidate.check([
                {
                    //校驗的數據
                    el: _this.demo1.userName,
                    //校驗的規則
                    rules: [
                        {rule: "isNoNull", msg: "姓名不能為空"}
                    ],
                },
                {
                    //校驗的數據
                    el: _this.demo1.userContact,
                    //校驗的規則
                    rules: [
                        {rule: "isNoNull", msg: "聯系方式不能為空"}, 
                        {rule: "isMobile", msg: "請輸入正確的聯系方式"}
                    ]
                }
            ])
            this.demo1.tips = _tips;
        }
    }
})

2-2.多種校驗規則

輸入電話或者郵箱都可以

調用代碼


    
    
        
        
        {{demo2.tips}}

new Vue({
    el: "#form-box",
    data: {
        //...
        demo2: {
            userName: "守候",
            userContact: "",
            tips: ""
        },
    },
    methods: {
        //...
        handleSubmit2(){
            let _this = this;
            let _tips=ecValidate.check([
                {
                    //校驗的數據
                    el: _this.demo2.userName,
                    //校驗的規則
                    rules: [
                        {rule: "isNoNull", msg: "姓名不能為空"}
                    ],
                },
                {
                    //校驗的數據
                    el: _this.demo2.userContact,
                    //校驗的規則
                    rules: [
                        {rule: "isNoNull", msg: "聯系方式不能為空"}, 
                        {rule: "isMobile,isEmail", msg: "請輸入正確的聯系方式"}
                    ]
                }
            ])
            this.demo2.tips = _tips;
        }
    }
})

2-3.擴展校驗規則

比如要增加一個校驗規則：名字只能是中文（只能輸入中文，這個規則已經收錄了，這里只作為展示使用）


    
    
    
        
        {{demo3.tips}}

new Vue({
    el: "#form-box",
    data: {
        //...
        demo3: {
            userName: "",
            tips: ""
        },
    },
    methods: {
        //...
        handleSubmit3(){
            let _this = this;
            let _tips=ecValidate.check([
                {
                    //校驗的數據
                    el: _this.demo3.userName,
                    //校驗的規則（使用在 mounted 的擴展語法）
                    rules: [
                        {rule: "isNoNull", msg: "姓名不能為空"},
                        {rule: "isChinese", msg: "姓名只能輸出中文"}
                    ],
                }
            ])
            this.demo3.tips = _tips;
        }
    },
    mounted:function () {
        //添加擴展規則
        ecValidate.addRule("isChinese",function (val, msg) {
            return !/^[u4E00-u9FA5]+$/.test(val) ? msg : "";
        })
    }
})

2-4.數據有誤，定位第一個有誤的數據

調用代碼


    
    
        
        {{demo4.tips.userName}}
        
        {{demo4.tips.contact}}
        提交成功

new Vue({
    el: "#form-box",
    data: {
        //...
        demo4: {
            userName: "",
            userContact: "",
            tips: {}
        },
    },
    methods: {
        //...
        handleSubmit4(){
                let _this = this;
                //在校驗數組里面加上alias字段，保存錯誤信息。該字段要保證值唯一性，并且要么全部加上，要么全部不加，不然可能會造成頁面錯誤
                let _tips=ecValidate.check([
                    {
                        //校驗的數據
                        el: _this.demo4.userName,
                        alias: "userName",
                        //校驗的規則
                        rules: [
                            {rule: "isNoNull", msg: "姓名不能為空"}
                        ],
                    },
                    {
                        //校驗的數據
                        el: _this.demo4.userContact,
                        alias: "contact",
                        //校驗的規則
                        rules: [
                            {rule: "isNoNull", msg: "聯系方式不能為空"},
                            {rule: "isMobile,isEmail", msg: "請輸入正確的聯系方式"}
                        ]
                    }
                ])
                this.demo4.tips = _tips;
            }
        },
    },
    mounted:function () {
        
    }
})

2-5.哪些數據有誤，定位有誤的數據

調用代碼


    
    
    
        
        {{demo5.tips.userName}}
        
        {{demo5.tips.contact}}
        提交成功

new Vue({
    el: "#form-box",
    data: {
        //...
        demo5: {
            userName: "",
            userContact: "",
            tips: {}
        },
    },
    methods: {
        //...
        handleSubmit5(){
            let _this = this;
            //checkAll校驗全部的函數，必須要加上alias字段。
            let _tips=ecValidate.checkAll([
                {
                    //校驗的數據
                    el: _this.demo5.userName,
                    alias: "userName",
                    //校驗的規則
                    rules: [
                        {rule: "isNoNull", msg: "姓名不能為空"}
                    ],
                },
                {
                    //校驗的數據
                    el: _this.demo5.userContact,
                    alias: "contact",
                    //校驗的規則
                    rules: [
                        {rule: "isNoNull", msg: "聯系方式不能為空"}, 
                        {rule: "isMobile,isEmail", msg: "請輸入正確的聯系方式"}
                    ]
                }
            ])
            this.demo5.tips = _tips;
        },
    },
    mounted:function () {
        
    }
})

2-6.實時校驗

調用代碼


    
    
    
        
        {{demo6.tips}}

new Vue({
    el: "#form-box",
    data: {
        //...
        demo6: {
            userContact: "",
            tips:"",
        },
    },
    methods: {
        //...
        handleInput6(){
            let _this = this;
            let _tips=ecValidate.check([
                {
                    //校驗的數據
                    el: _this.demo6.userContact,
                    //校驗的規則
                    rules: [
                        {rule: "isNoNull", msg: "聯系方式不能為空"}, 
                        {rule: "isMobile,isEmail", msg: "請輸入正確的聯系方式"}
                    ]
                },
            ])
            this.demo6.tips = _tips;
        },
    },
    mounted:function () {
        
    }
})

2-7.實時校驗，其他校驗規則

比如密碼強度和長度的校驗

調用代碼



    
    密碼強度：{{demo7.tips}}
    {{demo7.tips}}

new Vue({
    el: "#form-box",
    data: {
        //...
        demo7: {
            pwd:"",
            tips: "",
        }
    },
    methods: {
        handleInput7(){
                let _this = this;
                let _tips=ecValidate.check([
                    {
                        //校驗的數據
                        el: _this.demo7.pwd,
                        //校驗的規則
                        //由于檢查密碼強度規則 pwdLv 是實時返回密碼強度，并非報錯信息。所以該規則要放置在最后
                        rules: [
                            {rule: "minLength:6", msg: "密碼長度不能小于6"},
                            {rule: "maxLength:16", msg: "密碼長度不能大于16"},
                            {rule: "pwdLv"}
                        ]
                    },
                ])
                //判斷 _tips 是否是數字
                this.demo7.tips = _tips.constructor===Number?+_tips:_tips;
        },
    },
    mounted:function () {
        
    }
})

感覺密碼強度這樣寫法有點雞肋，也不方便，這個是重點優化部分。

2-8.校驗數據類型

比如下面檢測的是一個數據是否是數組類型

調用代碼

let tips=ecValidate.check([
    {
        el:"[1,2,3,4,5]",
        rules:[{rule:"isType:array",msg:"傳進去的數組不是數組"}]
    }
]);
console.log(tips);

用到的文件就是下面兩個，也歡迎大家 star 一下。

js文件：https://github.com/chenhuiYj/...

demo文件:https://github.com/chenhuiYj/...

4.小結

關于表單的一些常用校驗，就暫時寫到這里了，這個無心插柳的作品，現在還比較粗糙，以后還要有很長的修改優化之路。也歡迎大家在評論區提出一些建設性的意見，當交流也好。

-------------------------華麗的分割線--------------------

想了解更多，和我交流，內推職位，請添加我微信。或者關注我的微信公眾號：守候書閣

云服務器 GPU云服務器 php表單的校驗簡單的服務器校驗 linux簡單的常用命令 php常用的變量函數

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

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

[無心插柳]簡單實現常用的表單校驗函數

摘要：但當時想著就是簡單的校驗，沒必要引插件，就自己寫一個簡單的函數。隨著校驗的需求多樣化，函數越來越大。提供了常用的校驗規則，需要的可以擴展。有意取而不得，失落而歸。無意間有所獲，未有喜悅，但珍惜依舊 1.前言表單校驗，相信絕大部分的開發者會遇到過，網上也有很多插件可使用。但當時想著就是簡單的校驗，沒必要引插件，就自己寫一個簡單的函數。隨著校驗的需求多樣化，函數越來越大。有點輪子的雛形...

Jeff 2019-08-02 11:59 評論0 收藏0
[無心插柳]簡單實現常用的表單校驗函數

摘要：但當時想著就是簡單的校驗，沒必要引插件，就自己寫一個簡單的函數。隨著校驗的需求多樣化，函數越來越大。提供了常用的校驗規則，需要的可以擴展。有意取而不得，失落而歸。無意間有所獲，未有喜悅，但珍惜依舊 1.前言表單校驗，相信絕大部分的開發者會遇到過，網上也有很多插件可使用。但當時想著就是簡單的校驗，沒必要引插件，就自己寫一個簡單的函數。隨著校驗的需求多樣化，函數越來越大。有點輪子的雛形...

JinB 2019-08-29 17:15 評論0 收藏0
重拾css(9)——float

摘要：導致這一現象的最根本原因在于被設置了的元素會脫離文檔流。脫離文檔流可以理解為子元素與父元素間的結構被破壞，父子關系解除。 1.引言對于我們所有的web前端開發人員，float是或者曾經一度是你最熟悉的陌生人——你離不開它，卻整天承受著它所帶給你的各種痛苦，你以為它很簡單就那么一點知識，但卻駕馭不了它各種奇怪的現象。這就是我們又愛又恨的——float。所以，系統的學一學float是非常...

CollinPeng 2019-08-29 12:44 評論0 收藏0
【Python】查看函數的匯編指令

摘要：背景今天在看一篇介紹生成器的文章的時候無心插柳了解到一個很有趣的標準庫，可以用于查看函數的匯編指令，從而理解代碼的執行機制。相關技術，模塊代碼感想標準庫博大精深啊。背景今天在看一篇介紹Python生成器的文章的時候無心插柳了解到一個很有趣的Python標準庫dis，可以用于查看函數的匯編指令，從而理解Python代碼的執行機制。相關技術 Python3， dis模塊代碼 In ...

chnmagnus 2019-07-25 10:46 評論0 收藏0
JS面向對象編程--過程式分析

摘要：開扒但是，沒有類的概念，是構造函數和原型鏈的方式來體現的。福利原型鏈圖示網上找的，看懂即可跳過上述內容該圖把原型和構造函數間的關系理的很清楚，可在瀏覽器的運行并查看對象下原型間的關系。聲明：概念性介紹會簡單穿插，以過程式分析問題為主，便于提高實踐的意義。前言：面向對象，早已爛熟于耳，以java為最,php5.6之后更是擴展了面向對象式開發(起先引入對象概念，沒當個大方向，這下無...

why_rookie 2019-08-22 11:07 評論0 收藏0