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 相关文章推荐
js 获取子节点函数 (兼容FF与IE)
Apr 18 Javascript
原生js事件的添加和删除的封装
Jul 01 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
Mar 03 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
Jun 02 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
Jul 07 Javascript
AngularJS指令用法详解
Nov 02 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
Aug 21 Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
Sep 07 Javascript
Vue源码学习之初始化模块init.js解析
Nov 02 Javascript
Vue官方文档梳理之全局配置
Nov 22 Javascript
jquery添加div实现消息聊天框
Feb 08 jQuery
JavaScript Date对象功能与用法学习记录
Apr 28 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
php入门学习知识点二 PHP简单的分页过程与原理
2011/07/14 PHP
克隆一个新项目的快捷方式
2013/04/10 PHP
基于flush()不能按顺序输出时的解决办法
2013/06/29 PHP
浅析十款PHP开发框架的对比
2013/07/05 PHP
php环境下利用session防止页面重复刷新的具体实现
2014/01/09 PHP
jQuery实现拖动调整表格单元格大小的代码实例
2015/01/13 Javascript
浅谈jQuery 选择器和dom操作
2016/06/07 Javascript
微信小程序 Flex布局详解
2016/10/09 Javascript
JS排序之快速排序详解
2017/04/08 Javascript
10个最优秀的Node.js MVC框架
2017/08/24 Javascript
JS实现websocket长轮询实时消息提示的效果
2017/10/10 Javascript
纯JavaScript实现实时反馈系统时间
2017/10/26 Javascript
vue如何通过id从列表页跳转到对应的详情页
2018/05/01 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
2020/08/12 Javascript
vue用elementui写form表单时,在label里添加空格操作
2020/08/13 Javascript
[02:32]DOTA2亚洲邀请赛 C9战队出场宣传片
2015/02/07 DOTA
python操作ie登陆土豆网的方法
2015/05/09 Python
Python 专题二 条件语句和循环语句的基础知识
2017/03/19 Python
python编写弹球游戏的实现代码
2018/03/12 Python
Python结合ImageMagick实现多张图片合并为一个pdf文件的方法
2018/04/24 Python
使用Python通过win32 COM实现Word文档的写入与保存方法
2018/05/08 Python
python 实现分页显示从es中获取的数据方法
2018/12/26 Python
关于PyTorch源码解读之torchvision.models
2019/08/17 Python
python使用openCV遍历文件夹里所有视频文件并保存成图片
2020/01/14 Python
tensorflow pb to tflite 精度下降详解
2020/05/25 Python
python如何对链表操作
2020/10/10 Python
IE9对HTML5中部分属性不支持的原因分析
2014/10/15 HTML / CSS
护理学中专毕业生求职信
2013/11/11 职场文书
高中历史教学反思
2014/02/08 职场文书
初中三年毕业生的自我评价分享
2014/02/14 职场文书
大学生个人实习的自我评价
2014/02/15 职场文书
暑期政治学习心得体会
2014/09/02 职场文书
店铺转让协议书
2015/01/29 职场文书
2015暑假打工实践报告
2015/07/13 职场文书
MySQL连接查询你真的学会了吗?
2021/06/02 MySQL
《辉夜大小姐想让我告白》第三季正式预告
2022/03/20 日漫