vue中使用vee-validator完成表單校驗方案
前言
由于大部分移動端的組件庫都不提供表單校驗，因此需要自己封裝。目前，使用較多的是async-validator和vee-validator。其中，elementUI組件庫提供的表單驗證也是基于async-validator，vee-validator是一種基于vue模板的輕量級校驗框架?？梢愿鶕?jù)項目的需求，自行選擇合適的方案。本文主要討論的是vee-validator校驗方案。
表單校驗的封裝
在vue項目中，表單校驗是每個前端開發(fā)人員都避免不了的需求。校驗的好處可以避免無用的 http 請求，及校驗不通過不發(fā)送請求，也可以提高用戶的體驗效果。
安裝
npm install vee-validate --save
引入
一般我們會在 src 目錄下新建一個文件夾，里面新建一個 validator.js 和 validatorRule.js 文件。 validator.js 文件用來引入我們的 vee-validtor ， validatorRule.js 文件用來定義校驗的規(guī)則，當然還需要在main.js中注冊，如果使用國際化組件。
main.js 文件配置
import VueI18n from 'vue-i18n' // 國際化插件
import {Validator} from 'vee-validate' // 表單校驗組件
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'// 全局注冊
Vue.use(VeeValidate)
規(guī)則設置
vee-validator 默認是不自動導入提示語言包，所以得自己導入，一般只需要中文文件，但是還有一些需求是要支持國際化，所以要導入中英文插件。
// 引入中文文件
import zhCN from 'vee-validate/dist/locale/zh_CN'
// 引入英文文件
import en from 'vee-validate/dist/locale/en'
// 添加中文校驗規(guī)則設置
Validator.localize('zh_CN', {
// 提示語
messages: zhCN.messages,
// 提示語的信息在此設置，下面會提到
attributes: attributesCh
})
// 添加英文校驗規(guī)則設置
Validator.localize('en', {
messages: en.messages,
attributes: attributesEn
})
自定義規(guī)則
下面封裝方法實現(xiàn)校驗，其中
- validName
- errMsgZh
- errMsgEn
- validate
但大多數(shù)時候，推薦使用正則表達式，正則實則不了的，再去做特殊處理
export function setMessage(validName, errMsgZh, errMsgEn, validate) {
Validator.locale = 'en'
自定義驗證規(guī)則,取名為validName, 通過該方式使用v-validate="'required|phone'"
Validator.extend(validName, {
// 提示信息，不符合規(guī)則提示語
getMessage: (field, [args]) => {
return errMsgEn
},
// 驗證規(guī)則，符合規(guī)則通過，否則不通過 (規(guī)則為美國電話號碼)
validate: validate
})
Validator.locale = 'zh_CN'
Validator.extend(validName, {
getMessage: (field, [args]) => {
return errMsgZh
},
validate: validate
})
}
規(guī)則方法應用
validatorRule.js 中引入方法，定義具體的校驗規(guī)則,下面只列舉兩種規(guī)則，其他校驗規(guī)則可自行百度。
import {setMessage} from '../validate'
setMessage('phoneNum', '手機號不正確', '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)
})
別名設置
使用 vee-validate 內(nèi)部提供的驗證規(guī)則時，如果不使用別名，就會固定使用當前元素的name值去顯示錯誤信息，如我下面所示如果我不使用別名，使用非空驗證，當在中文環(huán)境下，就會顯示，myPhone是必須的，這樣用戶是無法知道m(xù)yPhone是什么的，所以對應別名例用戶更好分辨對應的元素別名設置規(guī)則， key 是你元素的 name 屬性， value 是有錯誤信息是展示的值
1、別名中文
export const attributesCh = {
relation: '關系',
relationDesc: '關系描述',
personName: '姓名',
accountName: '賬戶名',
gender: '性別',
phone: '手機號'
...
}
2、別名英文
export const attributesEn = {
phoneNum: 'phoneNum',
userName: 'name',
idCard: 'idCard',
zipCode: 'zipCode',
personMail: 'Email',
addressDetail: 'address',
isSmoker: 'isSmoker'
...
}
好了封裝基本就是這么簡單，最后貼出完整的代碼。
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', '手機號不正確', '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: '關系',
relationDesc: '關系描述'
...
}
// 別名英文
export const attributesEn = {
phoneNum: 'phoneNum',
userName: 'name',
idCard: 'idCard'
...
}
如果喜歡的話，就給個♥吧。。。。。
總結
以上所述是小編給大家介紹的vue中使用vee-validator完成表單校驗方案,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
相關文章
這篇文章主要介紹了使用Vant完成Dialog彈框案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue中el-table格式化el-table-column內(nèi)容的三種方法
本文主要介紹了vue中el-table格式化el-table-column內(nèi)容的三種方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
這篇文章主要介紹了element-ui中按需引入的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-12-12
本文通過實例代碼給大家介紹了vue 中swiper的使用，感興趣的朋友跟隨腳本之家小編一起學習吧2018-05-05
這篇文章主要介紹了淺談vue后臺管理系統(tǒng)權限控制思考與實踐，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
在Vue3中,defineProps()函數(shù)是定義和接收組件屬性的主要方式,通過簡單定義或對象定義,開發(fā)者可以靈活地接收并處理組件上的屬性值,簡單定義方式通過數(shù)組傳遞屬性名,而對象定義則可以約束屬性的數(shù)據(jù)類型、默認值及是否必須傳遞等2024-09-09
這篇文章主要介紹了vue 自定義內(nèi)置組件 select的相關知識，整合了第三方jquery 插件select2,具體實例代碼大家參考下本文2018-04-04
vue中使用router全局守衛(wèi)實現(xiàn)頁面攔截的示例
這篇文章主要介紹了vue中使用router全局守衛(wèi)實現(xiàn)頁面攔截的示例，幫助大家維護自己的項目，感興趣的朋友可以了解下2020-10-10
Vue 的 keep-alive 是一個內(nèi)置組件,用于緩存不活動的組件實例,避免重復渲染,從而優(yōu)化應用性能,下面就跟隨小編一起來看看其核心實現(xiàn)原理和緩存內(nèi)容吧2025-03-03
這篇文章主要為大家詳細介紹了vue3封裝輪播圖組件的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09