vue中使用vee-validator完成表单校验方案

前言

由于大部分移动端的组件库都不提供表单校验，因此需要自己封装。目前，使用较多的是async-validator和vee-validator。其中，elementUI组件库提供的表单验证也是基于async-validator，vee-validator是一种基于vue模板的轻量级校验框架。可以根据项目的需求，自行选择合适的方案。本文主要讨论的是vee-validator校验方案。

表单校验的封装

在vue项目中，表单校验是每个前端开发人员都避免不了的需求。校验的好处可以避免无用的 http 请求，及校验不通过不发送请求，也可以提高用户的体验效果。

安装

npm install vee-validate --save

引入

一般我们会在 src 目录下新建一个文件夹，里面新建一个 validator.js 和 validatorRule.js 文件。 validator.js 文件用来引入我们的 vee-validtor ， validatorRule.js 文件用来定义校验的规则，当然还需要在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)

规则设置

vee-validator 默认是不自动导入提示语言包，所以得自己导入，一般只需要中文文件，但是还有一些需求是要支持国际化，所以要导入中英文插件。

// 引入中文文件
import zhCN from \'vee-validate/dist/locale/zh_CN\'
// 引入英文文件
import en from \'vee-validate/dist/locale/en\'

// 添加中文校验规则设置
Validator.localize(\'zh_CN\', {
 // 提示语
 messages: zhCN.messages,
 // 提示语的信息在此设置，下面会提到
 attributes: attributesCh
})
// 添加英文校验规则设置
Validator.localize(\'en\', {
 messages: en.messages,
 attributes: attributesEn
})

自定义规则

下面封装方法实现校验，其中

validName
errMsgZh
errMsgEn
validate

但大多数时候，推荐使用正则表达式，正则实则不了的，再去做特殊处理

export function setMessage(validName, errMsgZh, errMsgEn, validate) {
 Validator.locale = \'en\'
 自定义验证规则,取名为validName, 通过该方式使用v-validate=\"\'required|phone\'\"
 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 \'../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 内部提供的验证规则时，如果不使用别名，就会固定使用当前元素的name值去显示错误信息，如我下面所示如果我不使用别名，使用非空验证，当在中文环境下，就会显示，myPhone是必须的，这样用户是无法知道myPhone是什么的，所以对应别名例用户更好分辨对应的元素别名设置规则， 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完成表单校验方案,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！