华山资源网

vue中使用vee-validator完成表单校验方案
网络编程 2024/11/18 佚名
3 1

前言

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

如果喜欢的话，就给个"color: #ff0000">总结

以上所述是小编给大家介绍的vue中使用vee-validator完成表单校验方案,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com