使用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 相关文章推荐
Javascript调试工具(下载)
Jan 09 Javascript
也说JavaScript中String类的replace函数
Sep 22 Javascript
javascript实现简单的html5视频播放器
May 06 Javascript
js动态添加的DIV中的onclick事件简单实例
Jul 25 Javascript
关于JavaScript 原型链的一点个人理解
Jul 31 Javascript
原生JS京东轮播图代码
Mar 22 Javascript
Ionic项目中Native Camera的使用方法
Jun 07 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
Jun 19 Javascript
vue 中动态绑定class 和 style的方法代码详解
Jun 01 Javascript
Vue中错误图片的处理的实现代码
Nov 07 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
Apr 26 Javascript
基于Electron实现桌面应用开发代码实例
Jul 07 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中使用DOM类读取XML文件的实现代码
2011/12/14 PHP
PHP基础教程(php入门基础教程)一些code代码
2013/01/06 PHP
PHP使用SOAP调用.net的WebService数据
2013/11/12 PHP
php使用$_POST或$_SESSION[]向js函数传参
2014/09/16 PHP
php防止sql注入之过滤分页参数实例
2014/11/03 PHP
thinkphp连贯操作实例分析
2014/11/22 PHP
功能强大的php分页函数
2016/07/20 PHP
jQuery 图像裁剪插件Jcrop的简单使用
2009/05/22 Javascript
JQuery里选择超链接的实现代码
2011/05/22 Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
2013/07/09 Javascript
Jquery在指定DIV加载HTML示例代码
2014/02/17 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
2014/08/20 Javascript
JavaScript实现身份证验证代码
2016/02/17 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
2017/02/05 Javascript
浅析为什么a="abc" 不等于 a=new String("abc")
2017/10/25 Javascript
解决Jquery下拉框数据动态获取的问题
2018/01/25 jQuery
结合Vue控制字符和字节的显示个数的示例
2018/05/17 Javascript
vue中v-for通过动态绑定class实现触发效果
2018/12/06 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
2019/11/01 Javascript
JS实现图片幻灯片效果代码实例
2020/05/21 Javascript
Python函数中的函数(闭包)用法实例
2016/03/15 Python
Python进行数据提取的方法总结
2016/08/22 Python
Python 编程速成(推荐)
2019/04/15 Python
python格式化输出保留2位小数的实现方法
2019/07/02 Python
将python2.7添加进64位系统的注册表方式
2019/11/20 Python
几款好用的python工具库(小结)
2020/10/20 Python
使用Pytorch搭建模型的步骤
2020/11/16 Python
浅谈html5增强的页面元素
2016/06/14 HTML / CSS
IdealFit官方网站:女性蛋白质、补充剂和运动服装
2019/03/24 全球购物
规范化管理年活动总结
2014/08/29 职场文书
党的群众路线教育实践活动对照检查材料(教师)
2014/09/24 职场文书
销售经理岗位职责范本
2015/04/02 职场文书
教师节倡议书2015
2015/04/27 职场文书
单位实习介绍信
2015/05/05 职场文书
2016年优秀团支部事迹材料
2016/02/26 职场文书
基于flask实现五子棋小游戏
2021/05/25 Python