在Vant的基礎(chǔ)上實現(xiàn)添加表單驗證框架的方法示例
Vant 一套基于Vue的移動端UI框架,有贊出品。
因為UI設(shè)計的夠漂亮,源碼結(jié)構(gòu)也比較清晰,插件定位也比較明確,重要是實戰(zhàn)過程中的使用體驗不錯。在最近的項目當中就使用 Vant 作為移動端的基礎(chǔ)UI框架,但在實踐過程中發(fā)現(xiàn)該框架和其他框架有不一樣的地方。例如它不內(nèi)置表單驗證,接下來,我把自己實現(xiàn)驗證框架的思路分享出來。
分析需求
我們找的插件主要能解決以下問題
- 支持中文
- 適應UI框架
- 分組驗證
- 動態(tài)驗證(數(shù)據(jù)動態(tài),規(guī)則動態(tài))
去網(wǎng)絡(luò)上搜索了一些框架,推薦兩款(在官方也有推https://cn.vuejs.org/v2/cookbook/form-validation.html )
我的項目里使用的是 vee-validate
解決問題
安裝及支持中文
npm install vee-validate --save
import VeeValidate, { Validator } from 'vee-validate'
import zh_CN from 'vee-validate/dist/locale/zh_CN';
Validator.localize('zh_CN', zh_CN)
Vue.use(VeeValidate)
中文問題可以解決,但是遇到個很惡心的問題,這樣的錯誤提示會變成 title不能為空 這樣的提示,實際展示效果是不好的。
所以這個需要重構(gòu)下,自己來實現(xiàn)錯誤提示的內(nèi)容
const formatFileSize = function (size) {
let units = ['Byte', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
let threshold = 1024;
size = Number(size) * threshold;
let i = size === 0 ? 0 : Math.floor(Math.log(size) / Math.log(threshold));
return (((size / Math.pow(threshold, i)).toFixed(2) * 1) + " " + (units[i]));
}
Validator.localize('zh_CN', {
name: 'zh_CN',
attributes: {}
messages: {
_default: () => `${fieldName}無效`,
after: (field, [target]) => `${fieldName}必須在${target}之后`,
alpha_dash: () => `${fieldName}能夠包含字母數(shù)字字符、破折號和下劃線`,
alpha_num: () => `${fieldName}只能包含字母數(shù)字字符`,
alpha_spaces: () => `${fieldName}只能包含字母字符和空格`,
alpha: () => `${fieldName}只能包含字母字符`,
before: (field, [target]) => `${fieldName}必須在${target}之前`,
between: (field, [min, max]) => `${fieldName}必須在${min}與${max}之間`,
confirmed: (field, [confirmedField]) => `${fieldName}不能和${confirmedField}匹配`,
credit_card: () => `${fieldName}格式錯誤`,
date_between: (field, [min, max]) => `${fieldName}必須在${min}和${max}之間`,
date_format: (field, [format]) => `${fieldName}必須符合${format}格式`,
decimal: (field, [decimals = '*'] = []) => `${fieldName}必須是數(shù)字,且能夠保留${decimals === '*' ? '' : decimals}位小數(shù)`,
digits: (field, [length]) => `${fieldName}必須是數(shù)字,且精確到${length}位數(shù)`,
dimensions: (field, [width, height]) => `${fieldName}必須在${width}像素與${height}像素之間`,
email: () => `${fieldName}不是一個有效的郵箱`,
ext: () => `${fieldName}不是一個有效的文件`,
image: () => `${fieldName}不是一張有效的圖片`,
included: () => `${fieldName}不是一個有效值`,
integer: () => `${fieldName}必須是整數(shù)`,
ip: () => `${fieldName}不是一個有效的地址`,
length: (field, [length, max]) => {
if (max) {
return `${fieldName}長度必須在${length}到${max}之間`
}
return `${fieldName}長度必須為${length}`
},
max: (field, [length]) => `${fieldName}不能超過${length}個字符`,
max_value: (field, [max]) => `${fieldName}必須小于或等于${max}`,
mimes: () => `${fieldName}不是一個有效的文件類型`,
min: (field, [length]) => `${fieldName}必須至少有${length}個字符`,
min_value: (field, [min]) => `${fieldName}必須大于或等于${min}`,
excluded: () => `${fieldName}不是一個有效值`,
numeric: () => `${fieldName}只能包含數(shù)字字符`,
regex: () => `${fieldName}格式無效`,
required: () => `${fieldName}不能為空`,
size: (field, [size]) => `${fieldName}必須小于${formatFileSize(size)}`,
url: () => `${fieldName}不是一個有效的url`
}
})
Vue.use(VeeValidate)
適應UI框架
雖然Vant沒有內(nèi)置驗證框架,但提供了錯誤的樣式。
<van-field :error="..." :error-message="..." />
用 vee-validate 可以這樣解決
<van-field
...
name="title"
v-validate="'required|max:20'"
:error="errors.has('title')"
:error-message="errors.first('title')"
/>
this.$validator.validateAll().then((result) => {
if(result){
// ...
}
})
分組驗證
<van-field
name="title"
data-vv-scope="group-1"
v-validate="'required|max:20'"
:error="errors.has('group-1.title')"
:error-message="errors.first('group-1.title')"
/>
this.$validator.validateAll('group-1').then((result) => {
if(result){
// ...
}
})
如此,基于 Vant 的驗證框架問題就得以解決了,可以愉快的玩耍表單驗證了。
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
詳解Vue后臺管理系統(tǒng)開發(fā)日常總結(jié)(組件PageHeader)
這篇文章主要介紹了詳解Vue后臺管理系統(tǒng)開發(fā)日??偨Y(jié)(組件PageHeader),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-11-11

