在Vant的基礎(chǔ)上實(shí)現(xiàn)添加表單驗(yàn)證框架的方法示例
Vant 一套基于Vue的移動(dòng)端UI框架,有贊出品。
因?yàn)閁I設(shè)計(jì)的夠漂亮,源碼結(jié)構(gòu)也比較清晰,插件定位也比較明確,重要是實(shí)戰(zhàn)過程中的使用體驗(yàn)不錯(cuò)。在最近的項(xiàng)目當(dāng)中就使用 Vant 作為移動(dòng)端的基礎(chǔ)UI框架,但在實(shí)踐過程中發(fā)現(xiàn)該框架和其他框架有不一樣的地方。例如它不內(nèi)置表單驗(yàn)證,接下來,我把自己實(shí)現(xiàn)驗(yàn)證框架的思路分享出來。
分析需求
我們找的插件主要能解決以下問題
- 支持中文
- 適應(yīng)UI框架
- 分組驗(yàn)證
- 動(dòng)態(tài)驗(yàn)證(數(shù)據(jù)動(dòng)態(tài),規(guī)則動(dòng)態(tài))
去網(wǎng)絡(luò)上搜索了一些框架,推薦兩款(在官方也有推https://cn.vuejs.org/v2/cookbook/form-validation.html )
我的項(xiàng)目里使用的是 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)
中文問題可以解決,但是遇到個(gè)很惡心的問題,這樣的錯(cuò)誤提示會(huì)變成 title不能為空 這樣的提示,實(shí)際展示效果是不好的。
所以這個(gè)需要重構(gòu)下,自己來實(shí)現(xiàn)錯(cuò)誤提示的內(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ù)字字符、破折號(hào)和下劃線`, 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}格式錯(cuò)誤`, 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}不是一個(gè)有效的郵箱`, ext: () => `${fieldName}不是一個(gè)有效的文件`, image: () => `${fieldName}不是一張有效的圖片`, included: () => `${fieldName}不是一個(gè)有效值`, integer: () => `${fieldName}必須是整數(shù)`, ip: () => `${fieldName}不是一個(gè)有效的地址`, length: (field, [length, max]) => { if (max) { return `${fieldName}長(zhǎng)度必須在${length}到${max}之間` } return `${fieldName}長(zhǎng)度必須為${length}` }, max: (field, [length]) => `${fieldName}不能超過${length}個(gè)字符`, max_value: (field, [max]) => `${fieldName}必須小于或等于${max}`, mimes: () => `${fieldName}不是一個(gè)有效的文件類型`, min: (field, [length]) => `${fieldName}必須至少有${length}個(gè)字符`, min_value: (field, [min]) => `${fieldName}必須大于或等于${min}`, excluded: () => `${fieldName}不是一個(gè)有效值`, numeric: () => `${fieldName}只能包含數(shù)字字符`, regex: () => `${fieldName}格式無效`, required: () => `${fieldName}不能為空`, size: (field, [size]) => `${fieldName}必須小于${formatFileSize(size)}`, url: () => `${fieldName}不是一個(gè)有效的url` } }) Vue.use(VeeValidate)
適應(yīng)UI框架
雖然Vant沒有內(nèi)置驗(yàn)證框架,但提供了錯(cuò)誤的樣式。
<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){ // ... } })
分組驗(yàn)證
<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 的驗(yàn)證框架問題就得以解決了,可以愉快的玩耍表單驗(yàn)證了。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
詳解vue+nodejs獲取多個(gè)表數(shù)據(jù)的方法
這篇文章主要為大家介紹了vue+nodejs獲取多個(gè)表數(shù)據(jù)的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2021-12-12vue結(jié)合el-dialog封裝自己的confirm二次確認(rèn)彈窗方式
這篇文章主要介紹了vue結(jié)合el-dialog封裝自己的confirm二次確認(rèn)彈窗方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-08-08Vue+Express實(shí)現(xiàn)登錄狀態(tài)權(quán)限驗(yàn)證的示例代碼
這篇文章主要介紹了Vue+Express實(shí)現(xiàn)登錄狀態(tài)權(quán)限驗(yàn)證的示例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05element-ui修改el-form-item樣式的詳細(xì)示例
在使用element-ui組件庫(kù)的時(shí)候經(jīng)常需要修改原有樣式,下面這篇文章主要給大家介紹了關(guān)于element-ui修改el-form-item樣式的詳細(xì)示例,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11Vue中的el-date-picker時(shí)間選擇器的使用實(shí)例詳解
el-date-picker是Element UI框架中提供的日期選擇器組件,它支持單個(gè)日期、日期范圍、時(shí)間、日期時(shí)間等多種選擇方式,本文給大家介紹Vue中的el-date-picker時(shí)間選擇器的使用,感興趣的朋友一起看看吧2023-10-10Vue+Element UI實(shí)現(xiàn)下拉菜單的封裝
這篇文章主要為大家詳細(xì)介紹了Vue+Element UI實(shí)現(xiàn)下拉菜單的封裝代碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09警告[vue-router]?Duplicate?named?routes?definition簡(jiǎn)單解決方法
這篇文章主要關(guān)于介紹了警告[vue-router]?Duplicate?named?routes?definition的解決方法,這個(gè)錯(cuò)誤提示是因?yàn)樵赩ue Router中定義了重復(fù)的路由名稱,需要的朋友可以參考下2023-12-12Vue如何根據(jù)角色獲取菜單動(dòng)態(tài)添加路由
這篇文章主要介紹了Vue如何根據(jù)角色獲取菜單動(dòng)態(tài)添加路由,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01關(guān)于Vue.js 2.0的Vuex 2.0 你需要更新的知識(shí)庫(kù)
關(guān)于Vue.js 2.0 的 Vuex 2.0你需要更新的知識(shí)庫(kù),感興趣的小伙伴們可以參考一下2016-11-11