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(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。