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


Posted in Javascript onNovember 01, 2019

前言

由于大部分移动端的组件库都不提供表单校验,因此需要自己封装。目前,使用较多的是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
})

自定义规则

下面封装方法实现校验,其中

  • 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完成表单校验方案,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jquery 显示*天*时*分*秒实现时间计时器
May 07 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
Feb 04 Javascript
jQuery动态星级评分效果实现方法
Aug 06 Javascript
Bootstrap表单制作代码
Mar 17 Javascript
使用bootstrap插件实现模态框效果
May 10 Javascript
vue将对象新增的属性添加到检测序列的方法
Feb 24 Javascript
Angular5中调用第三方js插件的方法
Feb 26 Javascript
vue树形结构获取键值的方法示例
Jun 21 Javascript
vue使用Google地图的实现示例代码
Dec 19 Javascript
原生js实现公告滚动效果
Jan 10 Javascript
Node爬取大批量文件的方法示例
Jun 28 Javascript
Element Breadcrumb 面包屑的使用方法
Jul 26 Javascript
解决vue的过渡动画无法正常实现问题
Oct 31 #Javascript
VUE单页面切换动画代码(全网最好的切换效果)
Oct 31 #Javascript
js new Date()实例测试
Oct 31 #Javascript
一起写一个即插即用的Vue Loading插件实现
Oct 31 #Javascript
Vue 使用beforeEach实现登录状态检查功能
Oct 31 #Javascript
vue路由切换之淡入淡出的简单实现
Oct 31 #Javascript
vue-router之实现导航切换过渡动画效果
Oct 31 #Javascript
You might like
Discuz 6.0+ 批量注册用户名
2009/09/13 PHP
那些年我们错过的魔术方法(Magic Methods)
2014/01/14 PHP
php使用websocket示例详解
2014/03/12 PHP
php时间计算相关问题小结
2016/05/09 PHP
PHP获取redis里不存在的6位随机数应用示例【设置24小时过时】
2017/06/07 PHP
编写简单的jQuery提示插件
2014/12/21 Javascript
js获取域名的方法
2015/01/27 Javascript
JavaScript Function函数类型介绍
2015/04/08 Javascript
Javascript之Number对象介绍
2016/06/07 Javascript
AngularJS 表达式详细讲解及实例代码
2016/07/26 Javascript
微信小程序  简单实例(阅读器)的实例开发
2016/09/29 Javascript
jQuery密码强度验证控件使用详解
2017/01/05 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
2017/06/15 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
2017/09/26 Javascript
vue在线动态切换主题色方案
2020/03/26 Javascript
python中将zip压缩包转为gz.tar的方法
2018/10/18 Python
对pandas中iloc,loc取数据差别及按条件取值的方法详解
2018/11/06 Python
Python 3 实现定义跨模块的全局变量和使用教程
2019/07/07 Python
python实现猜拳小游戏
2020/04/05 Python
解决Django中修改js css文件但浏览器无法及时与之改变的问题
2019/08/31 Python
Python 用三行代码提取PDF表格数据
2019/10/13 Python
pycharm 配置svn的图文教程(手把手教你)
2021/01/15 Python
python re.match()用法相关示例
2021/01/27 Python
基于Html5实现的react拖拽排序组件示例
2018/08/13 HTML / CSS
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
2015/01/01 HTML / CSS
N.Peal官网:来自伦敦的高档羊绒品牌
2018/10/29 全球购物
学校门卫工作职责
2013/12/07 职场文书
店长助理岗位职责
2013/12/13 职场文书
高中毕业自我鉴定
2013/12/16 职场文书
运动会广播稿60字
2014/01/15 职场文书
纠风工作实施方案
2014/03/15 职场文书
节能宣传周活动总结
2014/05/08 职场文书
十一国庆节“向国旗敬礼”主题班会活动方案
2014/09/27 职场文书
夫妻分居协议书范本
2014/11/28 职场文书
社区元宵节活动总结
2015/02/06 职场文书
2015年公司保安年终工作总结
2015/05/14 职场文书