实现elementUI表单的全局验证的方法步骤


Posted in Javascript onApril 29, 2019

使用ElementUi搭建框架的时候,大家应该都有考虑过怎么做全局验证,毕竟复制粘贴什么的是最烦了,这里分享下个人的解决方法。

验证规则

分析规则

一般验证规则,主要是是否必填,不为空,以及参数类型的验证。 基于这个条件,我们开始找找思路, 单个字段的验证是这样的:

name: {
 required: 是否必填,
 validator: 自定义规则,
 message: 失败提示消息(非自定义时触发),
 trigger: 触发方式
}

循环实现

固定的规则。当一个东西固定之后,那必然是可以重复使用的,并且可以快速生成,我们可以用循环来实现它。 但是用循环来实现,我们则需要一个数据规则。

定义数据规则

分析下需要的字段,大概就是以下几种,其他的可以根据自身的需求去增加:

  • 验证的字段名 label
  • 验证的值 value
  • 验证的类型 type
  • 是否必填 required
  • 自定义规则 validator

那最终我们得到的是这样一个字段配置列表:

fieldList: [
   {label: '账号', value: 'account', type: 'input', required: true, validator: checkAccount},
   {label: '密码', value: 'password', type: 'password', required: true, validator: checkPwd},
   {label: '昵称', value: 'name', type: 'input', required: true},
   {label: '性别', value: 'sex', type: 'select', list: 'sexList', required: true},
   {label: '头像', value: 'avatar', type: 'slot', className: 'el-form-block'},
   {label: '手机号码', value: 'phone', type: 'input', validator: checkPhone},
   {label: '微信', value: 'wechat', type: 'input', validator: checkWechat},
   {label: 'QQ', value: 'qq', type: 'input', validator: checkQQ},
   {label: '邮箱', value: 'email', type: 'input', validator: checkEmail},
   {label: '描述', value: 'desc', type: 'textarea', className: 'el-form-block'},
   {label: '状态', value: 'status', type: 'select', list: 'statusList', required: true}
  ]

form完整的字段配置建议参考:

formInfo: {
  ref: null,
  data: {
   id: '', // *唯一ID
   account: '', // *用户账号
   password: '', // *用户密码
   name: '', // *用户昵称
   type: 2, // *用户类型: 0: 手机注册 1: 论坛注册 2: 管理平台添加
   sex: 0, // *性别: 0:男 1:女
   avatar: '', // 头像
   phone: '', // 手机号码
   wechat: '', // 微信
   qq: '', // qq
   email: '', // 邮箱
   desc: '', // 描述
   status: 1 // *状态: 0:停用,1:启用(默认为1)',
   // create_user: '', // 创建人
   // create_time: '', // 创建时间
   // update_user: '', // 修改人
   // update_time: '' // 修改时间
  },
  fieldList: [
   {label: '账号', value: 'account', type: 'input', required: true, validator: checkAccount},
   {label: '密码', value: 'password', type: 'password', required: true, validator: checkPwd},
   {label: '昵称', value: 'name', type: 'input', required: true},
   {label: '性别', value: 'sex', type: 'select', list: 'sexList', required: true},
   {label: '头像', value: 'avatar', type: 'slot', className: 'el-form-block'},
   {label: '手机号码', value: 'phone', type: 'input', validator: checkPhone},
   {label: '微信', value: 'wechat', type: 'input', validator: checkWechat},
   {label: 'QQ', value: 'qq', type: 'input', validator: checkQQ},
   {label: '邮箱', value: 'email', type: 'input', validator: checkEmail},
   {label: '描述', value: 'desc', type: 'textarea', className: 'el-form-block'},
   {label: '状态', value: 'status', type: 'select', list: 'statusList', required: true}
  ],
  rules: {},
  labelWidth: '120px'
  }

实现验证方法

一: 循环字段列表,根据type判断是提示选择不能为空,还是输入不能为空
二:如果字段必填,则根据是否有自定义验证去生成验证规则
三: 字段非必填,有自定义规则生成验证

// 初始化验证数据
 _initValidate (formInfo) {
  const obj = {},
  fieldList = formInfo.fieldList
  // 循环字段列表
  for (let item of fieldList) {
  let type = item.type === 'select' ? '选择' : '输入'
  if (item.required) {
   if (item.validator) {
   obj[item.value] = {
    required: item.required,
    validator: item.validator,
    trigger: 'blur'
   }
   } else {
   obj[item.value] = {
    required: item.required,
    message: '请' + type + item.label,
    trigger: 'blur'
   }
   }
  } else if (item.validator) {
   obj[item.value] = {
   validator: item.validator,
   trigger: 'blur'
   }
  }
  }
  formInfo.rules = obj
 }

使用

结合上面的字段设计,我在页面上的使用是这样的,大家可以根据自己的字段设计去修改,大致实现过程是这样的

// mixin中的方法, 初始化字段验证规则
this._initValidate(this.formInfo)

怎么配置到全局

  1. 通过mixin配置,然后在页面中使用(个人使用的是mixin)
  2. 配置为全局方法在页面中调用
  3. 挂在到vue实例上,通过this即可访问

mixins例子

export default {
 data () {
 /**
  * 页面上的可复用的验证规则
  */
 // 验证号码格式
 const CHECK_PHONE = (rule, value, callback) => {
  let check = this.$validate({label: '号码', value, rules: ['phone']})
  if (!check.result) {
  callback(new Error(check.message))
  } else {
  callback()
  }
 }
 // 验证号码格式以及不能为空
 const CHECK_PHONE_NOTNULL = (rule, value, callback) => {
  let check = this.$validate({label: '号码', value, rules: ['notnull', 'phone']})
  if (!check.result) {
  callback(new Error(check.message))
  } else {
  callback()
  }
 }
 // 检测邮箱格式
 const CHECK_EMAIL = (rule, value, callback) => {
  let check = this.$validate({label: '邮箱', value, rules: ['email']})
  if (!check.result) {
  callback(new Error(check.message))
  } else {
  callback()
  }
 }
 // 检测邮箱格式以及不能为空
 const CHECK_EMAIL_NOTNULL = (rule, value, callback) => {
  let check = this.$validate({label: '邮箱', value, rules: ['notnull', 'email']})
  if (!check.result) {
  callback(new Error(check.message))
  } else {
  callback()
  }
 }
 return {
  CHECK_PHONE,
  CHECK_PHONE_NOTNULL,
  CHECK_EMAIL,
  CHECK_EMAIL_NOTNULL
 }
 },
 methods: {
 // 初始化验证数据
 _initValidate (formInfo) {
  const obj = {},
  fieldList = formInfo.fieldList
  // 循环字段列表
  for (let item of fieldList) {
  let type = item.type === 'select' ? '选择' : '输入'
  if (item.required) {
   if (item.validator) {
   obj[item.value] = {
    required: item.required,
    validator: item.validator,
    trigger: 'blur'
   }
   } else {
   obj[item.value] = {
    required: item.required,
    message: '请' + type + item.label,
    trigger: 'blur'
   }
   }
  } else if (item.validator) {
   obj[item.value] = {
   validator: item.validator,
   trigger: 'blur'
   }
  }
  }
  formInfo.rules = obj
 }
 }
}

最后

在项目的系统管理模块中可以看到示例代码:

项目地址

项目代码地址

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
OfflineSave离线保存代码再次发布使用说明
May 23 Javascript
用jquery等比例控制图片宽高的具体实现
Jan 28 Javascript
教你如何使用node.js制作代理服务器
Nov 26 Javascript
JavaScript面试题(指针、帽子和女朋友)
Nov 23 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
Jan 10 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
Aug 10 Javascript
Angular Excel 导入与导出的实现代码
Apr 17 Javascript
vue中的面包屑导航组件实例代码
Jul 01 Javascript
微信小程序 调用微信授权窗口相关问题解决
Jul 25 Javascript
ES6中new Function()语法及应用实例分析
Feb 19 Javascript
微信小程序实现搜索功能
Mar 10 Javascript
js+canvas实现纸牌游戏
Mar 16 Javascript
深入浅析Vue 中 ref 的使用
Apr 29 #Javascript
详解微信小程序实现跑马灯效果(附完整代码)
Apr 29 #Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
Apr 29 #Javascript
微信小程序调用微信支付接口的实现方法
Apr 29 #Javascript
vue实现微信分享链接添加动态参数的方法
Apr 29 #Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
Apr 29 #Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
Apr 28 #Javascript
You might like
dedecms中常见问题修改方法总结
2007/03/21 PHP
wamp安装后自定义配置的方法
2014/08/23 PHP
php用正则判断是否为数字的方法
2016/03/25 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
PHP设计模式之工厂模式定义与用法详解
2018/04/03 PHP
PHP手机短信验证码实现流程详解
2018/05/17 PHP
qTip 基于JQuery的Tooltip插件[兼容性好]
2010/09/01 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
2011/10/10 Javascript
关于jquery性能最佳实践的讨论,与求教
2012/03/30 Javascript
jQuery.fn和jQuery.prototype区别介绍
2013/10/05 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
2015/06/09 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
2015/12/10 Javascript
浅析JavaScript声明变量
2015/12/21 Javascript
jquery获取form表单input元素值的简单实例
2016/05/30 Javascript
AngularJS ng-blur 指令详解及简单实例
2016/07/30 Javascript
谈谈对vue响应式数据更新的误解
2017/08/01 Javascript
Angularjs实现页面模板清除的方法
2018/07/20 Javascript
vue-router 2.0 跳转之router.push()用法说明
2020/08/12 Javascript
vue 如何使用递归组件
2020/10/23 Javascript
微信小程序实现底部弹出模态框
2020/11/18 Javascript
Python中的startswith和endswith函数使用实例
2014/08/25 Python
详解Python字符串对象的实现
2015/12/24 Python
用Python将动态GIF图片倒放播放的方法
2016/11/02 Python
Python简单实现的代理服务器端口映射功能示例
2018/04/08 Python
Python XlsxWriter模块Chart类用法实例分析
2019/03/11 Python
PyInstaller将Python文件打包为exe后如何反编译(破解源码)以及防止反编译
2020/04/15 Python
keras 实现轻量级网络ShuffleNet教程
2020/06/19 Python
解析python 中/ 和 % 和 //(地板除)
2020/06/28 Python
Sneaker Studio捷克:购买运动鞋
2018/07/08 全球购物
亚马逊巴西站:Amazon.com.br
2019/09/22 全球购物
Michael Kors英国官网:美国奢侈品品牌
2019/11/13 全球购物
工厂门卫岗位职责
2013/11/25 职场文书
缓刑人员思想汇报
2014/10/11 职场文书
2014年惩防体系建设工作总结
2014/12/01 职场文书
2014年环保局工作总结
2014/12/11 职场文书
深入浅出讲解Java8函数式编程
2022/01/18 Java/Android