怎么在vue中利用vee-validator实现表单校验
怎么在vue中利用vee-validator实现表单校验？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。
十载的贵港网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。营销型网站的优势是能够根据用户设备显示端的尺寸不同，自动调整贵港建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联建站从事“贵港网站设计”,“贵港网站推广”以来，每个客户项目都认真落实执行。
表单校验的封装
在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实现表单校验的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！
本文名称：怎么在vue中利用vee-validator实现表单校验
链接地址：http://6mz.cn/article/picocs.html