前言
由于大部分移动端的组件库都不提供表单校验，因此需要自己封装。目前，使用较多的是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, {
