[無意插柳]簡單實現經常使用的表單校驗函數
有意取而不得，失落而歸。無心間有所獲，未有喜悅，但珍惜依舊html
1.前言
表單校驗，相信絕大部分的開發者會遇到過，網上也有不少插件可以使用。但當時想着就是簡單的校驗，不必引插件，就本身寫一個簡單的函數。隨着校驗的需求多樣化，函數愈來愈大。有點輪子的雛形，算是無意插柳吧。如今也該分享出來了，和你們交流交流。函數比較粗糙，若是你們有建議，評論留言吧。vue
1.關於實現的過程，原理都是參考了《JavaScript設計模式與開發實踐》策略模式的一個例子。代碼比較簡單，你們移步到文末的連接，下載相關的文件，運行調試下就會知道是當中的奧祕了。這裏就不作過多的介紹，只展現出能夠應付哪些校驗場景和使用的方法。git
2.雖然我開發項目中會使用這個函數，但今天的文章，主要是出於分享和交流學習，介紹下這種表單校驗的方式。目前函數比較粗糙，功能不夠強大，待完善，在項目中使用要注意謹慎。github
3.文章例子依賴 vue ，只爲了方便展現，該函數爲原生 js 函數。設計模式
2.表單校驗的場景
首先，簡單列舉下表單校驗的經常使用場景數組
2-1.基礎數據校驗
關於下面調用的規則：rule，所有封裝在這個文件下面的ruleData這個變量這裏。一看就知道怎麼回事了。提供了經常使用的校驗規則，須要的能夠擴展。bash
調用代碼微信
<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.小結
關於表單的一些經常使用校驗，就暫時寫到這裏了，這個無意插柳的做品，如今還比較粗糙，之後還要有很長的修改優化之路。也歡迎你們在評論區提出一些建設性的意見，當交流也好。
-------------------------華麗的分割線--------------------
想了解更多，和我交流，內推職位，請添加我微信。或者關注個人微信公衆號：守候書閣
相關文章
- 1. [無意插柳]簡單實現經常使用的表單校驗函數
- 2. 經常使用表單校驗RegExp
- 3. 表單校驗插件的使用
- 4. 使用JavaScript實現表單校驗
- 5. 表單校驗的使用
- 6. jQuery實現表單校驗
- 7. validate實現表單校驗
- 8. verify.js 極簡表單校驗插件
- 9. jquery表單校驗插件
- 10. 經常使用表單校驗正則表達式
- 更多相關文章...
- • PHP 表單驗證 - PHP教程
- • PHP 完整表單實例 - PHP教程
- • TiDB 在摩拜單車在線數據業務的應用和實踐
- • ☆基於Java Instrument的Agent實現
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 安裝cuda+cuDNN
- 2. GitHub的使用說明
- 3. phpDocumentor使用教程【安裝PHPDocumentor】
- 4. yarn run build報錯Component is not found in path 「npm/taro-ui/dist/weapp/components/rate/index「
- 5. 精講Haproxy搭建Web集羣
- 6. 安全測試基礎之MySQL
- 7. C/C++編程筆記：C語言中的複雜聲明分析，用實例帶你完全讀懂
- 8. Python3教程(1)----搭建Python環境
- 9. 李宏毅機器學習課程筆記2：Classification、Logistic Regression、Brief Introduction of Deep Learning
- 10. 阿里雲ECS配置速記
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. [無意插柳]簡單實現經常使用的表單校驗函數
- 2. 經常使用表單校驗RegExp
- 3. 表單校驗插件的使用
- 4. 使用JavaScript實現表單校驗
- 5. 表單校驗的使用
- 6. jQuery實現表單校驗
- 7. validate實現表單校驗
- 8. verify.js 極簡表單校驗插件
- 9. jquery表單校驗插件
- 10. 經常使用表單校驗正則表達式