[無心插柳]簡單實現(xiàn)常用的表單校驗函數(shù)

Jeff 發(fā)布于2019-08-02 11:59 / 1846人閱讀

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

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

1.前言

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

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

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

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

2.表單校驗的場景

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

2-1.基礎數(shù)據(jù)校驗

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

調用代碼


    
    
        
        {{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([
                {
                    //校驗的數(shù)據(jù)
                    el: _this.demo1.userName,
                    //校驗的規(guī)則
                    rules: [
                        {rule: "isNoNull", msg: "姓名不能為空"}
                    ],
                },
                {
                    //校驗的數(shù)據(jù)
                    el: _this.demo1.userContact,
                    //校驗的規(guī)則
                    rules: [
                        {rule: "isNoNull", msg: "聯(lián)系方式不能為空"}, 
                        {rule: "isMobile", msg: "請輸入正確的聯(lián)系方式"}
                    ]
                }
            ])
            this.demo1.tips = _tips;
        }
    }
})

2-2.多種校驗規(guī)則

輸入電話或者郵箱都可以

調用代碼


    
    
        
        
        {{demo2.tips}}

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

2-3.擴展校驗規(guī)則

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


    
    
    
        
        {{demo3.tips}}

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

2-4.數(shù)據(jù)有誤，定位第一個有誤的數(shù)據(jù)

調用代碼


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

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

2-5.哪些數(shù)據(jù)有誤，定位有誤的數(shù)據(jù)

調用代碼


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

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

2-7.實時校驗，其他校驗規(guī)則

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

調用代碼



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

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

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

2-8.校驗數(shù)據(jù)類型

比如下面檢測的是一個數(shù)據(jù)是否是數(shù)組類型

調用代碼

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

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

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

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

4.小結

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

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

想了解更多，和我交流，內推職位，請?zhí)砑游椅⑿?。或者關注我的微信公眾號：守候書閣

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

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

轉載請注明本文地址：http://systransis.cn/yun/53262.html

[無心插柳]簡單實現(xiàn)常用的表單校驗函數(shù)

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

BingqiChen 2019-08-23 13:03 評論0 收藏0
[無心插柳]簡單實現(xiàn)常用的表單校驗函數(shù)

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

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

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

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

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

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

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

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