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'
  ...
}

简单使用

配置设置好后就可以直接使用了。

<input name="myEmail" v-validate="'required|email'">
<span v-show="errors.has('myEmail')">
    {{ errors.first('myEmail')}}
</span>

• v-validate后面的required和email是官方已经规定好的几种默认错误类型中的两个，这个可以阅读官方文档。
• span中用到了errors的几个方法，这里的参数都是定义了验证规则的表单的name。

• 有关errors的方法:

  • first(‘field’): field中（也就是刚刚说过的name表单）中的第一个错误
  • collect(‘field’): field中所有的错误
  • has(‘field’): field中是否有错误
  • all(): 当前表单中的所有错误
  • any(): 当前表单中是否有错误
  • count(): 当前表单中的错误数量
  • clear(): 清除当前表单中的所有错误

PS：关于error，它是个json对象。

{
"errors": [{
    "field": "email",

    "msg": " email 必须是有效的邮箱.",

    "rule": "email",

    "scope": "__global__"
}]
}

好了封装基本就是这么简单，最后贴出完整的代码。

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'
  ...
}

如果喜欢的话，就给个♥吧。。。。。