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

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

摘要：但當(dāng)時(shí)想著就是簡(jiǎn)單的校驗(yàn)，沒(méi)必要引插件，就自己寫(xiě)一個(gè)簡(jiǎn)單的函數(shù)。隨著校驗(yàn)的需求多樣化，函數(shù)越來(lái)越大。提供了常用的校驗(yàn)規(guī)則，需要的可以擴(kuò)展。

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

1.前言

表單校驗(yàn)，相信絕大部分的開(kāi)發(fā)者會(huì)遇到過(guò)，網(wǎng)上也有很多插件可使用。但當(dāng)時(shí)想著就是簡(jiǎn)單的校驗(yàn)，沒(méi)必要引插件，就自己寫(xiě)一個(gè)簡(jiǎn)單的函數(shù)。隨著校驗(yàn)的需求多樣化，函數(shù)越來(lái)越大。有點(diǎn)輪子的雛形，算是無(wú)心插柳吧。現(xiàn)在也該分享出來(lái)了，和大家交流交流。函數(shù)比較粗糙，如果大家有建議，評(píng)論留言吧。

1.關(guān)于實(shí)現(xiàn)的過(guò)程，原理都是參考了《JavaScript設(shè)計(jì)模式與開(kāi)發(fā)實(shí)踐》策略模式的一個(gè)例子。代碼比較簡(jiǎn)單，大家移步到文末的鏈接，下載相關(guān)的文件，運(yùn)行調(diào)試下就會(huì)知道是當(dāng)中的奧秘了。這里就不做過(guò)多的介紹，只展示出可以應(yīng)付哪些校驗(yàn)場(chǎng)景和使用的方法。2.雖然我開(kāi)發(fā)項(xiàng)目中會(huì)使用這個(gè)函數(shù)，但今天的文章，主要是出于分享和交流學(xué)習(xí)，介紹下這種表單校驗(yàn)的方式。目前函數(shù)比較粗糙，功能不夠強(qiáng)大，待完善，在項(xiàng)目中使用要注意謹(jǐn)慎。
3.文章例子依賴 vue ，只為了方便展示，該函數(shù)為原生 js 函數(shù)。

2.表單校驗(yàn)的場(chǎng)景

首先，簡(jiǎn)單列舉下表單校驗(yàn)的常用場(chǎng)景

2-1.基礎(chǔ)數(shù)據(jù)校驗(yàn)

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

調(diào)用代碼


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

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

輸入電話或者郵箱都可以

調(diào)用代碼


    
    
        
        
        {{demo2.tips}}

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

2-3.擴(kuò)展校驗(yàn)規(guī)則

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


    
    
    
        
        {{demo3.tips}}

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

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

調(diào)用代碼


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

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

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

調(diào)用代碼


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

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

2-6.實(shí)時(shí)校驗(yàn)

調(diào)用代碼


    
    
    
        
        {{demo6.tips}}

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

2-7.實(shí)時(shí)校驗(yàn)，其他校驗(yàn)規(guī)則

比如密碼強(qiáng)度和長(zhǎng)度的校驗(yàn)

調(diào)用代碼



    
    密碼強(qiáng)度：{{demo7.tips}}
    {{demo7.tips}}

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

感覺(jué)密碼強(qiáng)度這樣寫(xiě)法有點(diǎn)雞肋，也不方便，這個(gè)是重點(diǎn)優(yōu)化部分。

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

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

調(diào)用代碼

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

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

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

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

4.小結(jié)

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

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

想了解更多，和我交流，內(nèi)推職位，請(qǐng)?zhí)砑游椅⑿拧；蛘哧P(guān)注我的微信公眾號(hào)：守候書(shū)閣