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

使用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
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞