vue中使用vee-validator完成表单校验方案
前言
由于大部分移动端的组件库都不提供表单校验，因此需要自己封装。目前，使用较多的是async-validator和vee-validator。其中，elementUI组件库提供的表单验证也是基于async-validator，vee-validator是一种基于vue模板的轻量级校验框架。可以根据项目的需求，自行选择合适的方案。本文主要讨论的是vee-validator校验方案。
表单校验的封装
在vue项目中，表单校验是每个前端开发人员都避免不了的需求。校验的好处可以避免无用的http请求，及校验不通过不发送请求，也可以提高用户的体验效果。
安装
npminstallvee-validate--save
引入
一般我们会在 src目录下新建一个文件夹，里面新建一个 validator.js和 validatorRule.js文件。 validator.js文件用来引入我们的 vee-validtor， validatorRule.js文件用来定义校验的规则，当然还需要在main.js中注册，如果使用国际化组件。
main.js文件配置
importVueI18nfrom'vue-i18n'//国际化插件
import{Validator}from'vee-validate'//表单校验组件
letlanguage='zh_CN'
Vue.use(VueI18n)
Validator.locale=language
consti18n=newVueI18n({
locale:language,
messages
})
newVue({
i18n
})
validator.js文件中引入
importVuefrom'vue' importVeeValidatefrom'vee-validate'//全局注册
Vue.use(VeeValidate)
规则设置
vee-validator默认是不自动导入提示语言包，所以得自己导入，一般只需要中文文件，但是还有一些需求是要支持国际化，所以要导入中英文插件。
//引入中文文件
importzhCNfrom'vee-validate/dist/locale/zh_CN'
//引入英文文件
importenfrom'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
但大多数时候，推荐使用正则表达式，正则实则不了的，再去做特殊处理
exportfunctionsetMessage(validName,errMsgZh,errMsgEn,validate){
Validator.locale='en'
自定义验证规则,取名为validName,通过该方式使用v-validate="'required|phone'"
Validator.extend(validName,{
//提示信息，不符合规则提示语
getMessage:(field,[args])=>{
returnerrMsgEn
},
//验证规则，符合规则通过，否则不通过(规则为美国电话号码)
validate:validate
})
Validator.locale='zh_CN'
Validator.extend(validName,{
getMessage:(field,[args])=>{
returnerrMsgZh
},
validate:validate
})
}
规则方法应用
validatorRule.js中引入方法，定义具体的校验规则,下面只列举两种规则，其他校验规则可自行百度。
import{setMessage}from'../validate'
setMessage('phoneNum','手机号不正确','phoneNumerror',(value,[args])=>{
constreg=/^((13|14|15|17|18)[0-9]{1}\d{8})$/
returnreg.test(value)
})
setMessage('personName','姓名只能包括中文字或英文字母','usernamenoyes',(value,[args])=>{
constreg=/^([\u4e00-\u9fa5\s]|[a-zA-Z])*$/
returnreg.test(value)
})
别名设置
使用 vee-validate内部提供的验证规则时，如果不使用别名，就会固定使用当前元素的name值去显示错误信息，如我下面所示如果我不使用别名，使用非空验证，当在中文环境下，就会显示，myPhone是必须的，这样用户是无法知道myPhone是什么的，所以对应别名例用户更好分辨对应的元素别名设置规则， key是你元素的 name属性， value是有错误信息是展示的值
1、别名中文
exportconstattributesCh={
relation:'关系',
relationDesc:'关系描述',
personName:'姓名',
accountName:'账户名',
gender:'性别',
phone:'手机号'
...
}
2、别名英文
exportconstattributesEn={
phoneNum:'phoneNum',
userName:'name',
idCard:'idCard',
zipCode:'zipCode',
personMail:'Email',
addressDetail:'address',
isSmoker:'isSmoker'
...
}
好了封装基本就是这么简单，最后贴出完整的代码。
validator.js文件。
importVuefrom'vue'
importVeeValidate,{Validator}from'vee-validate'
importzhCNfrom'vee-validate/dist/locale/zh_CN'
importenfrom'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
})
exportfunctionsetMessage(validName,errMsgZh,errMsgEn,validate){
Validator.locale='en'
Validator.extend(validName,{
getMessage:(field,[args])=>{
returnerrMsgEn
},
validate:validate
})
Validator.locale='zh_CN'
Validator.extend(validName,{
getMessage:(field,[args])=>{
returnerrMsgZh
},
validate:validate
})
}
validatorRule.js文件
import{setMessage}from'common/js/validate'
import{idCardNoUtil}from'common/js/validateExternal'
setMessage('phoneNum','手机号不正确','phoneNumerror',(value,[args])=>{
constreg=/^((13|14|15|17|18)[0-9]{1}\d{8})$/
returnreg.test(value)
})
setMessage('personName','姓名只能包括中文字或英文字母','usernamenoyes',(value,[args])=>{
constreg=/^([\u4e00-\u9fa5\s]|[a-zA-Z])*$/
returnreg.test(value)
})
//别名中文
exportconstattributesCh={
relation:'关系',
relationDesc:'关系描述'
...
}
//别名英文
exportconstattributesEn={
phoneNum:'phoneNum',
userName:'name',
idCard:'idCard'
...
}
如果喜欢的话，就给个♥吧。。。。。
总结
以上所述是小编给大家介绍的vue中使用vee-validator完成表单校验方案,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。