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

守候i發表於2018-11-12

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

1.前言

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

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

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

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

2.表單校驗的場景

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

2-1.基礎資料校驗

關於下面呼叫的規則：rule，全部封裝在這個檔案下面的ruleData這個變數這裡。一看就知道怎麼回事了。提供了常用的校驗規則，需要的可以擴充套件。

呼叫程式碼

<div id="form-box">
    <!--校驗單個欄位-->
    <div class="m-from-box">
        <p><input type="text" class="u-input-text" placeholder="請輸入姓名" v-model="demo1.userName"></p>
        <p class="u-tips">{{demo1.tips.userName}}</p>
        <p><input type="text" class="u-input-text" placeholder="請輸入電話或者郵箱" v-model="demo1.userContact"></p>
        <p class="u-tips">{{demo1.tips.userContact}}</p>
        <p><input type="button" class="u-btn-submit" value="提交" @click="handleSubmit1"></p>
    </div>
</div>
複製程式碼

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.多種校驗規則

輸入電話或者郵箱都可以

呼叫程式碼

<div id="form-box">
    <!--...-->
    <div class="m-from-box">
        <p><input type="text" class="u-input-text" placeholder="請輸入姓名" v-model="demo2.userName"></p>
        <p><input type="text" class="u-input-text" placeholder="請輸入電話或者郵箱" v-model="demo2.userContact"></p>
        <p class="u-tips" :class="{'success':demo2.tips==='success'}">{{demo2.tips}}</p>
        <p><input type="button" class="u-btn-submit" value="提交" @click="handleSubmit2"></p>
    </div>
</div>
複製程式碼

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.擴充套件校驗規則

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

<div id="form-box">
    <!--...-->
    <!--單個欄位，擴充套件規則-->
    <div class="m-from-box">
        <p><input type="text" class="u-input-text" placeholder="請輸入姓名" v-model="demo3.userName"></p>
        <p class="u-tips" :class="{'success':demo3.tips==='success'}">{{demo3.tips}}</p>
        <p><input type="button" class="u-btn-submit" value="提交" @click="handleSubmit3"></p>
    </div>
</div>
複製程式碼

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.資料有誤，定位第一個有誤的資料

呼叫程式碼

<div id="form-box">
    <!--...-->
    <div class="m-from-box">
        <p><input type="text" class="u-input-text" placeholder="請輸入姓名" v-model="demo4.userName" :class="{'err':demo4.tips.userName}"></p>
        <p class="u-tips">{{demo4.tips.userName}}</p>
        <p><input type="text" class="u-input-text" placeholder="請輸入電話或者郵箱" v-model="demo4.userContact" :class="{'err':demo4.tips.contact}"></p>
        <p class="u-tips">{{demo4.tips.contact}}</p>
        <p class="u-tips success" v-if="demo4.tips==='success'">提交成功</p>
        <p><input type="button" class="u-btn-submit" value="提交" @click="handleSubmit4"></p>
    </div>
</div>
複製程式碼

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.哪些資料有誤，定位有誤的資料

呼叫程式碼

<div id="form-box">
    <!--...-->
    <!--校驗全部-->
    <div class="m-from-box">
        <p><input type="text" class="u-input-text" placeholder="請輸入姓名" v-model="demo5.userName" :class="{'err':demo5.tips.userName}"></p>
        <p class="u-tips">{{demo5.tips.userName}}</p>
        <p><input type="text" class="u-input-text" placeholder="請輸入電話或者郵箱" v-model="demo5.userContact" :class="{'err':demo5.tips.contact}"></p>
        <p class="u-tips">{{demo5.tips.contact}}</p>
        <p class="u-tips success" v-if="demo5.tips==='success'">提交成功</p>
        <p><input type="button" class="u-btn-submit" value="提交" @click="handleSubmit5"></p>
    </div>
</div>
複製程式碼

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.實時校驗

呼叫程式碼

<div id="form-box">
    <!--...-->
    <!--單個輸入，實時校驗-->
    <div class="m-from-box">
        <p><input type="text" class="u-input-text" placeholder="請輸入電話或者郵箱" v-model="demo6.userContact" :class="{'err':demo6.tips&&demo6.tips!=='success'}"  @input="handleInput6"></p>
        <p class="u-tips" :class="{'success':demo6.tips==='success'}">{{demo6.tips}}</p>
    </div>
</div>
複製程式碼

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.實時校驗，其他校驗規則

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

呼叫程式碼

<!--單個輸入，實時校驗-密碼強度-->
<div class="m-from-box">
    <p><input type="text" class="u-input-text" placeholder="請輸入密碼" v-model="demo7.pwd"  @input="handleInput7"></p>
    <p class="u-tips" :class="'lv'+demo7.tips" v-if="demo7.tips.constructor===Number">密碼強度：{{demo7.tips}}</p>
    <p class="u-tips" :class="'lv'+demo7.tips" v-else>{{demo7.tips}}</p>
</div>
複製程式碼

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檔案：github.com/chenhuiYj/e…

demo檔案:github.com/chenhuiYj/e…

4.小結

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

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

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

element-ui自定義表單校驗規則及常用表單校驗
2020-09-29
UI
atoi函式簡單實現
2016-07-10
函式
『無為則無心』Python函式 — 28、Python函式的簡單應用
2021-07-13
Python函式
js中trim函式的簡單實現
2012-11-29
JS函式
Vue中form表單常用rules校驗規則
2024-04-27
VueORM
vue表單校驗方法
2021-12-19
Vue
通用表單驗證函式-FormCheckJavaScriptFunction
2010-11-30
函式ORMJavaScriptFunction
jQuery常用的動畫函式簡單介紹
2017-03-24
jQuery動畫函式
element-ui 表單校驗 Rules 配置常用黑科技
2020-07-11
UI
常用數字函式簡單舉例
2015-04-05
函式
element-ui的----el-form表單校驗巢狀表單校驗(表單多層巢狀)+el-table和el-form巢狀使用表單校驗
2020-11-27
UIORM巢狀
簡單介紹v-for中動態校驗el-form表單項的實踐
2022-06-05
ORM
小程式自定義表單校驗
2020-01-03
flutter - 登陸介面&表單校驗
2019-10-05
Flutter
AngularJS教程十九—— 表單校驗
2016-02-02
AngularJS
iview Form 表單校驗時，必傳符號錯位，校驗無效的某個原因
2020-09-26
ViewORM符號
無心插柳——ZUN和“東方Project”對遊戲女性角色設計的影響
2020-11-03
Project遊戲
Python-split()函式用法及簡單實現
2021-09-11
Python函式
[譯]簡單的React身份校驗機制
2019-01-15
React
簡單的printf函式與scnaf函式
2016-12-15
函式
js-動態表單校驗-吐血總結最近遇到的變態表單校驗2---element+原生
2021-06-25
JS
非同步之三：Async 函式的使用及簡單實現
2019-02-25
非同步函式
利用回撥函式實現簡單的輪播圖效果
2019-05-19
函式
純CSS實現表單驗證
2019-01-19
CSS
實現elementUI表單的全域性驗證
2019-04-28
UI
簡單的RIP實驗
2017-11-15
一種簡單好用的Vue表單驗證
2017-11-03
Vue
Android需求之RxJava2實現表單校驗(註冊登入)
2020-11-13
AndroidRxJava
JavaScript 表單、物件、函式
2020-12-14
JavaScript物件函式
經典EL表示式和Jquery實現表格表單常用操作
2017-11-17
jQuery
幾個簡單又實用的PHP函式
2019-03-04
PHP函式
常用的表單驗證程式碼分享
2017-04-10
PostgreSQL 原始碼解讀（249）- 實現簡單的鉤子函式
2020-03-17
SQL原始碼函式
前端表單驗證常用的25個JS正規表示式
2021-10-22
前端JS
利用jQuery實現表單驗證功能
2021-09-09
jQuery
gin websocket 簡單分散式實現
2018-03-18
Web分散式
vue elementUI 表單校驗（多層巢狀）
2019-02-22
VueUI巢狀
javascript表單賬戶密碼校驗提交
2018-09-14
JavaScript密碼

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

1.前言

2.表單校驗的場景

2-1.基礎資料校驗

2-2.多種校驗規則

2-3.擴充套件校驗規則

2-4.資料有誤，定位第一個有誤的資料

2-5.哪些資料有誤，定位有誤的資料

2-6.實時校驗

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

2-8.校驗資料型別

4.小結

相關文章