有意取而不得，失落而歸。無意間有所獲，未有喜悅，但珍惜依舊
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 一下。
demo檔案:github.com/chenhuiYj/e…
4.小結
關於表單的一些常用校驗，就暫時寫到這裡了，這個無心插柳的作品，現在還比較粗糙，以後還要有很長的修改優化之路。也歡迎大家在評論區提出一些建設性的意見，當交流也好。
————————-華麗的分割線——————–
想了解更多，和我交流，內推職位，請新增我微信。或者關注我的微信公眾號：守候書閣