Vant 一套基于Vue的移動端UI框架，有贊出品。
因為UI設計的夠漂亮，源碼結構也比較清晰，插件定位也比較明確，重要是實戰過程中的使用體驗不錯。在最近的項目當中就使用 Vant 作為移動端的基礎UI框架，但在實踐過程中發現該框架和其他框架有不一樣的地方。例如它不內置表單驗證，接下來，我把自己實現驗證框架的思路分享出來。
分析需求
我們找的插件主要能解決以下問題
去網絡上搜索了一些框架，推薦兩款（在官方也有推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不能為空 這樣的提示，實際展示效果是不好的。
所以這個需要重構下，自己來實現錯誤提示的內容
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}能夠包含字母數字字符、破折號和下劃線`, alpha_num: () => `${fieldName}只能包含字母數字字符`, 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}必須是數字，且能夠保留${decimals === '*' ? '' : decimals}位小數`, digits: (field, [length]) => `${fieldName}必須是數字，且精確到${length}位數`, dimensions: (field, [width, height]) => `${fieldName}必須在${width}像素與${height}像素之間`, email: () => `${fieldName}不是一個有效的郵箱`, ext: () => `${fieldName}不是一個有效的文件`, image: () => `${fieldName}不是一張有效的圖片`, included: () => `${fieldName}不是一個有效值`, integer: () => `${fieldName}必須是整數`, 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}只能包含數字字符`, regex: () => `${fieldName}格式無效`, required: () => `${fieldName}不能為空`, size: (field, [size]) => `${fieldName}必須小于${formatFileSize(size)}`, url: () => `${fieldName}不是一個有效的url` }})Vue.use(VeeValidate)適應UI框架
雖然Vant沒有內置驗證框架，但提供了錯誤的樣式。
<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 的驗證框架問題就得以解決了，可以愉快的玩耍表單驗證了。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
