快捷導(dǎo)航

vue中使用vee-validator完成表單校驗(yàn)方案

更新時(shí)間：2019年11月01日 08:22:54 作者：蛙哇

vee-validator是一種基于vue模板的輕量級(jí)校驗(yàn)框架。本文主要討論的是vee-validator校驗(yàn)方案，感興趣的朋友跟隨小編一起看看吧

前言

由于大部分移動(dòng)端的組件庫(kù)都不提供表單校驗(yàn)，因此需要自己封裝。目前，使用較多的是async-validator和vee-validator。其中，elementUI組件庫(kù)提供的表單驗(yàn)證也是基于async-validator，vee-validator是一種基于vue模板的輕量級(jí)校驗(yàn)框架。可以根據(jù)項(xiàng)目的需求，自行選擇合適的方案。本文主要討論的是vee-validator校驗(yà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'
 ...
}

如果喜歡的話，就給個(gè)♥吧。。。。。

總結(jié)

以上所述是小編給大家介紹的vue中使用vee-validator完成表單校驗(yàn)方案,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: