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

// 提示信息，不符合规则提示语
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-u9fa5s]|[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]) => {								 
 2/3   首页 上一页 1 2 3 下一页 尾页