前言
由于大部分移动端的组件库都不提供表单校验,因此需要自己封装。目前,使用较多的是async-validator和vee-validator。其中,elementUI组件库提供的表单验证也是基于async-validator,vee-validator是一种基于vue模板的轻量级校验框架。可以根据项目的需求,自行选择合适的方案。本文主要讨论的是vee-validator校验方案。
表单校验的封装
在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 })
自定义规则
下面封装方法实现校验,其中
但大多数时候,推荐使用正则表达式,正则实则不了的,再去做特殊处理
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-validate表单验证的方法,包括了Vue中使用vee-validate表单验证的方法的使用技巧和注意事项,需要的朋友参考一下 Vue项目遇到要表单验证了吧,对我来说表单验证是个很纠(dan)结(teng)的内容,各种判断凌乱到飞起。往常使用jquery的validate插件做表单验证方便吧,你也可以在Vue里引入jquery的validate插件(如何引入jq
本文向大家介绍jQuery表单校验插件validator使用方法详解,包括了jQuery表单校验插件validator使用方法详解的使用技巧和注意事项,需要的朋友参考一下 validator插件:将jquery实现的常用操作进行封装,我们只需要学会插件的使用语法,就可以使用简单的代码实现较为复杂的功能。 validator的基本使用 1. 需要引入的文件 ① jQuery类库 ② 插件的js文件
本文向大家介绍Vue2.0表单校验组件vee-validate的使用详解,包括了Vue2.0表单校验组件vee-validate的使用详解的使用技巧和注意事项,需要的朋友参考一下 vee-validate使用教程 本文适合有一定Vue2.0基础的同学参考,根据项目的实际情况来使用,关于Vue的使用不做多余解释。本人也是一边学习一边使用,如果错误之处敬请批评指出* 一、安装 注意:@next,不然是
在spring mvc中,当用户在输入字段中输入空白时,如何显示自定义消息或删除jsp形式的整数字段输入,并使用hibernate验证器进行验证?它目前显示: 未能将java.lang.String类型的属性值转换为属性FreePass所需的int类型;嵌套异常是java.lang.NumberFormatException:对于输入字符串:“
本文向大家介绍vue+vue-validator 表单验证功能的实现代码,包括了vue+vue-validator 表单验证功能的实现代码的使用技巧和注意事项,需要的朋友参考一下 官方文档:http://vuejs.github.io/vue-validator/zh-cn/index.html github项目地址:https://github.com/vuejs/vue-validator 下
本文向大家介绍vue 使用自定义指令实现表单校验的方法,包括了vue 使用自定义指令实现表单校验的方法的使用技巧和注意事项,需要的朋友参考一下 笔者近期在公司的项目中使用自定义指令完成了表单校验。 这里将思路分享给大家,并写了一个小demo。这个自定义指令还需要大家自行完善。 demo可见Github:vue-form-param-check 首先关于自定义指令的介绍可以参考官网。 首先,在git