使用mixins,实现elementUI表单的全局验证

更新日期: 2019-04-02阅读量: 1721标签: element
使用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即可访问


来自:https://segmentfault.com/a/1190000018737830


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/2680

element-ui合并单元格

例如一个时间段下对应多行数据,这就不免就涉及到了单元格合并,为每一个时间段下的 每一行 数据中都添加上对应的时间段数据 ,设定一个数组来存放要合并的格数

element ui tree控件父节点和子节点之间的关联问题

问题描述:当需改的时候如果父节点为选中状态子节点不是全选中这样会显示为子节点为全选中状态;在显示复选框的情况下,是否严格的遵循父子不互相关联的做法,默认为 false ;

vue-cli 3中element-ui按需引入element-ui报错

项目用的脚手架是 vue-cli 3,安装 babel-plugin-component,vue-cli3搭建的项目中没有 .babelrc 文件,我是直接写在 babel.config.js文件中:

Vue Element-ui表单校验规则,你掌握了哪些?

Element-ui表单校验规则,使得错误提示可以直接在form-item下面显示,无需弹出框,因此还是很好用的。我在做了登录页面的表单校验后,一度以为我已经很了解表单的校验规则。但我在深入使用表单校验规则时

vue-element Tree树形控件

通过tree树形控件的default-checked-keys属性来设置默认选中的节点,Tree树形控件通过后台接口获取到数组数据,还需要再次遍历,将它再遍历为数组,这样我们才可以调用

Js:element的模糊查询

在项目中会用到模糊查询,之前在首页是用的element的tree显示的目录,会有用到搜索,但tree里边会有自带的模糊查询,用filter-node-method方法使用 但上次的项目中 又涉及到不试用插件的模糊搜索

elementui enter事件_在vue的element-ui下的el-input如何监听enter事件

在选择element-ui组件做开发的时候,发现直接使用@keyup.enter的形式监听不到回车事件,原因是element-ui自身封装了一层input标签,把原有的事件隐藏了。解决方法是:在enter后面加上.native

Element ui 表格不对齐的解决方法

当固定头部时有时候表格不对齐,第一种情况:没有水平滚动条,只有垂直滚动条;第二种情况:有垂直滚动条也有水平滚动条,特别是水平滚动条拖动到右边时,表格不对齐更明显

ElementUI使用v-if控制tab标签显示遇到的Duplicate keys detected: xxx问题

如果程序报错Duplicate keys detected: tab-xxx. This may cause an update error.八成是key重复了,首先检查一下v-for循环的key是否有问题;在<el-tab-pane>尽量不使用v-show控制标签的显示

element plus按需引入最优雅的用法

下载安装element plus后,在入口文件配置一下并挂载,就能畅通无阻的使用了。但问题是这样有很多用不上的组件都被打包进来了,导致包的体积非常大。采用按需导入的方法,其实是用解构的方式,从element的包中解构出来,再挂载到app上面。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!