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

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
})

import Vue from 'vue'
import VeeValidate from 'vee-validate'// 全局注册
Vue.use(VeeValidate)

// 引入中文文件
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
})

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
 })
}

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)
})

export const attributesCh = {
 relation: '关系',
 relationDesc: '关系描述',
 personName: '姓名',
 accountName: '账户名',
 gender: '性别',
 phone: '手机号'
 ...
}

export const attributesEn = {
 phoneNum: 'phoneNum',
 userName: 'name',
 idCard: 'idCard',
 zipCode: 'zipCode',
 personMail: 'Email',
 addressDetail: 'address',
 isSmoker: 'isSmoker'
 ...
}

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
 })
}

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