您好,登錄后才能下訂單哦!
怎么在vue中利用vee-validator實(shí)現(xiàn)表單校驗(yàn)?相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策,為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法,通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。
表單校驗(yàn)的封裝
在vue項(xiàng)目中,表單校驗(yàn)是每個(gè)前端開(kāi)發(fā)人員都避免不了的需求。校驗(yàn)的好處可以避免無(wú)用的 http 請(qǐng)求,及校驗(yàn)不通過(guò)不發(fā)送請(qǐng)求,也可以提高用戶的體驗(yàn)效果。
安裝
npm install vee-validate --save
引入
一般我們會(huì)在 src 目錄下新建一個(gè)文件夾,里面新建一個(gè) validator.js 和 validatorRule.js 文件。 validator.js 文件用來(lái)引入我們的 vee-validtor , validatorRule.js 文件用來(lái)定義校驗(yàn)的規(guī)則,當(dāng)然還需要在main.js中注冊(cè),如果使用國(guó)際化組件。
main.js 文件配置
import VueI18n from 'vue-i18n' // 國(guó)際化插件 import {Validator} from 'vee-validate' // 表單校驗(yàn)組件 let language = 'zh_CN' Vue.use(VueI18n) Validator.locale = language const i18n = new VueI18n({ locale: language, messages }) new Vue({ i18n })
validator.js 文件中引入
import Vue from 'vue' import VeeValidate from 'vee-validate'// 全局注冊(cè) Vue.use(VeeValidate)
規(guī)則設(shè)置
vee-validator 默認(rèn)是不自動(dòng)導(dǎo)入提示語(yǔ)言包,所以得自己導(dǎo)入,一般只需要中文文件,但是還有一些需求是要支持國(guó)際化,所以要導(dǎo)入中英文插件。
// 引入中文文件 import zhCN from 'vee-validate/dist/locale/zh_CN' // 引入英文文件 import en from 'vee-validate/dist/locale/en' // 添加中文校驗(yàn)規(guī)則設(shè)置 Validator.localize('zh_CN', { // 提示語(yǔ) messages: zhCN.messages, // 提示語(yǔ)的信息在此設(shè)置,下面會(huì)提到 attributes: attributesCh }) // 添加英文校驗(yàn)規(guī)則設(shè)置 Validator.localize('en', { messages: en.messages, attributes: attributesEn })
自定義規(guī)則
下面封裝方法實(shí)現(xiàn)校驗(yàn),其中
validName
errMsgZh
errMsgEn
validate
但大多數(shù)時(shí)候,推薦使用正則表達(dá)式,正則實(shí)則不了的,再去做特殊處理
export function setMessage(validName, errMsgZh, errMsgEn, validate) { Validator.locale = 'en' 自定義驗(yàn)證規(guī)則,取名為validName, 通過(guò)該方式使用v-validate="'required|phone'" Validator.extend(validName, { // 提示信息,不符合規(guī)則提示語(yǔ) getMessage: (field, [args]) => { return errMsgEn }, // 驗(yàn)證規(guī)則,符合規(guī)則通過(guò),否則不通過(guò) (規(guī)則為美國(guó)電話號(hào)碼) validate: validate }) Validator.locale = 'zh_CN' Validator.extend(validName, { getMessage: (field, [args]) => { return errMsgZh }, validate: validate }) }
規(guī)則方法應(yīng)用
validatorRule.js 中引入方法,定義具體的校驗(yàn)規(guī)則,下面只列舉兩種規(guī)則,其他校驗(yàn)規(guī)則可自行百度。
import {setMessage} from '../validate' setMessage('phoneNum', '手機(jī)號(hào)不正確', 'phoneNum error', (value, [args]) => { const reg = /^((13|14|15|17|18)[0-9]{1}\d{8})$/ return reg.test(value) }) setMessage('personName', '姓名只能包括中文字或英文字母', 'username no yes', (value, [args]) => { const reg = /^([\u4e00-\u9fa5\s]|[a-zA-Z])*$/ return reg.test(value) })
別名設(shè)置
使用 vee-validate 內(nèi)部提供的驗(yàn)證規(guī)則時(shí),如果不使用別名,就會(huì)固定使用當(dāng)前元素的name值去顯示錯(cuò)誤信息,如我下面所示如果我不使用別名,使用非空驗(yàn)證,當(dāng)在中文環(huán)境下,就會(huì)顯示,myPhone是必須的,這樣用戶是無(wú)法知道m(xù)yPhone是什么的,所以對(duì)應(yīng)別名例用戶更好分辨對(duì)應(yīng)的元素別名設(shè)置規(guī)則, key 是你元素的 name 屬性, value 是有錯(cuò)誤信息是展示的值
1、別名中文
export const attributesCh = { relation: '關(guān)系', relationDesc: '關(guān)系描述', personName: '姓名', accountName: '賬戶名', gender: '性別', phone: '手機(jī)號(hào)' ... }
2、別名英文
export const attributesEn = { phoneNum: 'phoneNum', userName: 'name', idCard: 'idCard', zipCode: 'zipCode', personMail: 'Email', addressDetail: 'address', isSmoker: 'isSmoker' ... }
好了封裝基本就是這么簡(jiǎn)單,最后貼出完整的代碼。
validator.js文件。
import Vue from 'vue' import VeeValidate, {Validator} from 'vee-validate' import zhCN from 'vee-validate/dist/locale/zh_CN' import en from 'vee-validate/dist/locale/en' import {attributesCh, attributesEn} from 'common/js/validateRule' Vue.use(VeeValidate) Validator.localize('zh_CN', { messages: zhCN.messages, attributes: attributesCh }) Validator.localize('en', { messages: en.messages, attributes: attributesEn }) export function setMessage(validName, errMsgZh, errMsgEn, validate) { Validator.locale = 'en' Validator.extend(validName, { getMessage: (field, [args]) => { return errMsgEn }, validate: validate }) Validator.locale = 'zh_CN' Validator.extend(validName, { getMessage: (field, [args]) => { return errMsgZh }, validate: validate }) }
validatorRule.js文件
import {setMessage} from 'common/js/validate' import {idCardNoUtil} from 'common/js/validateExternal' setMessage('phoneNum', '手機(jī)號(hào)不正確', 'phoneNum error', (value, [args]) => { const reg = /^((13|14|15|17|18)[0-9]{1}\d{8})$/ return reg.test(value) }) setMessage('personName', '姓名只能包括中文字或英文字母', 'username no yes', (value, [args]) => { const reg = /^([\u4e00-\u9fa5\s]|[a-zA-Z])*$/ return reg.test(value) }) // 別名中文 export const attributesCh = { relation: '關(guān)系', relationDesc: '關(guān)系描述' ... } // 別名英文 export const attributesEn = { phoneNum: 'phoneNum', userName: 'name', idCard: 'idCard' ... }
看完上述內(nèi)容,你們掌握怎么在vue中利用vee-validator實(shí)現(xiàn)表單校驗(yàn)的方法了嗎?如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。