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的loading 加载提示效果实现代码
Sep 01 Javascript
JavaScript中对象属性的添加和删除示例
May 12 Javascript
JS版元素周期表实现方法
Aug 05 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
Feb 25 Javascript
js注入 黑客之路必备!
Sep 14 Javascript
彻底学会Angular.js中的transclusion
Mar 12 Javascript
ES6实现的遍历目录函数示例
Apr 07 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
Jul 19 Javascript
ReactNative踩坑之配置调试端口的解决方法
Jul 28 Javascript
JS手机端touch事件计算滑动距离的方法示例
Oct 26 Javascript
layer弹出层全屏及关闭方法
Aug 17 Javascript
JavaScript中的事件与异常捕获详析
Feb 24 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
搜索和替换文件或目录的一个好类--很实用
2006/10/09 PHP
PHP动态输出JavaScript代码实例
2015/02/12 PHP
PHP将字符串首字母大小写转换的实例
2017/01/21 PHP
详谈PHP面向对象中常用的关键字和魔术方法
2017/02/04 PHP
JavaScript 中的事件教程
2007/04/05 Javascript
面向对象的编程思想在javascript中的运用上部
2009/11/20 Javascript
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
2011/07/31 Javascript
关于火狐(firefox)及ie下event获取的两种方法
2012/12/27 Javascript
在JavaScript中typeof的用途介绍
2013/04/11 Javascript
javascript实现焦点滚动图效果 具体方法
2013/06/24 Javascript
jQuery拖拽div实现思路
2014/02/19 Javascript
JS小游戏之仙剑翻牌源码详解
2014/09/25 Javascript
JavaScript toUpperCase()方法使用详解
2016/08/26 Javascript
Javascript中call,apply,bind方法的详解与总结
2016/12/12 Javascript
express默认日志组件morgan的方法
2018/04/05 Javascript
js代码规范之Eslint安装与配置详解
2018/09/08 Javascript
详解基于webpack&gettext的前端多语言方案
2019/01/29 Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
2019/04/09 Javascript
vue+element项目中过滤输入框特殊字符小结
2019/08/07 Javascript
[58:54]EG vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python实现将汉字转换成汉语拼音的库
2015/05/05 Python
Python使用回溯法子集树模板解决爬楼梯问题示例
2017/09/08 Python
Go/Python/Erlang编程语言对比分析及示例代码
2018/04/23 Python
Numpy截取指定范围内的数据方法
2018/11/14 Python
解决python Markdown模块乱码的问题
2019/02/14 Python
选择Python写网络爬虫的优势和理由
2019/07/07 Python
python实现字典嵌套列表取值
2019/12/16 Python
Django Path转换器自定义及正则代码实例
2020/05/29 Python
重构Python代码的六个实例
2020/11/25 Python
Ejb技术面试题
2015/04/29 面试题
电大毕业自我鉴定
2014/02/03 职场文书
县政府办公室领导班子个人对照检查材料
2014/09/16 职场文书
领导班子民主生活会整改措施(工商局)
2014/09/21 职场文书
离婚协议书范本
2015/01/26 职场文书
详细介绍Java中的CyclicBarrier
2022/04/13 Java/Android
vscode内网访问服务器的方法
2022/06/28 Servers