使用mixins实现elementUI表单全局验证的解决方法


Posted in Javascript onApril 02, 2019

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

验证规则
分析规则

一般验证规则,主要是是否必填,不为空,以及参数类型的验证。

基于这个条件,我们开始找找思路, 单个字段的验证是这样的:

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

循环实现

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

但是用循环来实现,我们则需要一个数据规则。

定义数据规则

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

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

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

fieldList: [
   {label: '账号', value: 'account', type: 'input', required: true},
   {label: '密码', value: 'password', type: 'password', required: true},
   {label: '昵称', value: 'name', type: 'input', required: true},
   {label: '性别', value: 'sex', type: 'select', list: 'sexList', required: true},
   {label: '头像', value: 'avatar', type: 'input'},
   {label: '手机号码', value: 'phone', type: 'input'},
   {label: '微信', value: 'wechat', type: 'input'},
   {label: 'QQ', value: 'qq', type: 'input'},
   {label: '邮箱', value: 'email', type: 'input'},
   {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: '', // 邮箱
   status: 1 // *状态: 0:停用,1:启用(默认为1)',
   // create_user: '', // 创建人
   // create_time: '', // 创建时间
   // update_user: '', // 修改人
   // update_time: '' // 修改时间
  },
  fieldList: [
   {label: '账号', value: 'account', type: 'input', required: true},
   {label: '密码', value: 'password', type: 'password', required: true},
   {label: '昵称', value: 'name', type: 'input', required: true},
   {label: '性别', value: 'sex', type: 'select', list: 'sexList', required: true},
   {label: '头像', value: 'avatar', type: 'input'},
   {label: '手机号码', value: 'phone', type: 'input'},
   {label: '微信', value: 'wechat', type: 'input'},
   {label: 'QQ', value: 'qq', type: 'input'},
   {label: '邮箱', value: 'email', type: 'input'},
   {label: '状态', value: 'status', type: 'select', list: 'statusList', required: true}
  ],
  rules: {},
  labelWidth: '120px'
  }

实现验证方法

  • 循环字段列表,根据type判断是提示选择不能为空,还是输入不能为空
  • 如果字段必填,则根据是否有自定义验证去生成验证规则
  • 字段非必填,有自定义规则生成验证
// 初始化验证数据
 _initRules (formInfo) {
  const obj = {},
  fieldList = formInfo.fieldList
  // 循环字段列表
  for (let item of fieldList) {
  let type = item.type === 'select' ? '选择' : '输入'

  if (item.required) {
   if (item.rules) {
   obj[item.value] = {
    required: item.required,
    validator: item.rules,
    trigger: 'blur'
   }
   } else {
   obj[item.value] = {
    required: item.required,
    message: '请' + type + item.label,
    trigger: 'blur'
   }
   }
  } else if (item.rules) {
   obj[item.value] = {
   validator: item.rules,
   trigger: 'blur'
   }
  }
  }
  formInfo.rules = obj
 }

怎么配置到全局

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

最后

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

项目地址

项目代码地址

总结

以上所述是小编给大家介绍的使用mixins实现elementUI表单的全局验证的解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Prototype ObjectRange对象学习
Jul 19 Javascript
13个绚丽的Jquery 界面设计网站推荐
Sep 28 Javascript
字符串的replace方法应用浅析
Dec 06 Javascript
javascript学习笔记(七) js函数介绍
Jun 19 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
Sep 03 Javascript
多种jQuery绑定事件的实现方式
Jun 13 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
Dec 22 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
Sep 03 Javascript
Vue实现按钮级权限方案
Nov 21 Javascript
vue中对象数组去重的实现
Feb 06 Javascript
JS实现分页导航效果
Feb 19 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
Apr 26 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
Apr 02 #Javascript
基于vue实现web端超大数据量表格的卡顿解决
Apr 02 #Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
Apr 02 #Javascript
详解vue后台系统登录态管理
Apr 02 #Javascript
微信小程序实现人脸识别登陆的示例代码
Apr 02 #Javascript
Angular7中创建组件/自定义指令/管道的方法实例详解
Apr 02 #Javascript
Node.js中package.json中库的版本号(~和^)
Apr 02 #Javascript
You might like
PHP 中英文混合排版中处理字符串常用的函数
2007/04/12 PHP
使用PHPCMS搭建wap手机网站
2015/09/20 PHP
常见PHP数据库解决方案分析介绍
2015/09/24 PHP
PHP设计模式(四)原型模式Prototype实例详解【创建型】
2020/05/02 PHP
JS Loading功能的简单实现
2013/11/29 Javascript
清除div下面的所有标签的方法
2014/02/17 Javascript
绑定回车enter事件代码
2014/05/18 Javascript
jquery制作 随机弹跳的小球特效
2015/02/01 Javascript
jQuery实现的输入框选择时间插件用法实例
2015/02/28 Javascript
JavaScript数组常用方法
2015/03/02 Javascript
javascript实现跨域的方法汇总
2015/06/25 Javascript
浅谈Javascript数组的使用
2015/07/29 Javascript
jquery 遍历数组 each 方法详解
2016/05/25 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
2016/11/07 Javascript
解析jquery easyui tree异步加载子节点问题
2017/03/08 Javascript
js 倒计时(高效率服务器时间同步)
2017/09/12 Javascript
vue2.0+SVG实现音乐播放圆形进度条组件
2019/09/21 Javascript
JavaScript中reduce()的5个基本用法示例
2020/07/19 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
2020/07/20 Javascript
通过实例解析jQ Ajax操作相关原理
2020/09/23 Javascript
Python 遍历子文件和所有子文件夹的代码实例
2016/12/21 Python
Python打印输出数组中全部元素
2018/03/13 Python
flask中过滤器的使用详解
2018/08/01 Python
python中logging模块的一些简单用法的使用
2019/02/22 Python
在python中用url_for构造URL的方法
2019/07/25 Python
TensorFlow设置日志级别的几种方式小结
2020/02/04 Python
Python语法垃圾回收机制原理解析
2020/03/25 Python
Python接口测试环境搭建过程详解
2020/06/29 Python
css3 中translate和transition的使用方法
2020/03/26 HTML / CSS
中国跨境海淘网站:考拉海购
2016/08/01 全球购物
说一下Linux下有关用户和组管理的命令
2014/08/18 面试题
关于迟到的检讨书
2014/01/26 职场文书
合作意向书范本
2014/03/31 职场文书
房产公证书范本
2014/04/10 职场文书
飞越疯人院观后感
2015/06/09 职场文书
植物园观后感
2015/06/11 职场文书