利用Vue 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}
  ]

完整的表单字段配置建议参考以下结构。

 // 表单相关
  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 属性判断是提示“请选择”还是“请输入”，以生成相应的错误提示。
• 若字段标记为必填，则检查是否存在自定义验证规则（rules），并据此生成对应的校验配置。
• 若字段非必填但存在自定义规则，则仅生成该自定义验证逻辑。

// 初始化验证数据
 _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
 }

全局配置与挂载

全局配置方法

• 通过 Mixins 进行配置，并在页面中引入使用（本文采用此方式）。
• 将验证方法配置为全局方法，供页面直接调用。
• 将方法挂载到 Vue 实例上，使得页面中可通过 this 直接访问。

总结与资源

总结

在项目的系统管理模块中，可以看到完整的示例代码实现。

项目地址

项目代码托管地址

总结

以上介绍了使用 Mixins 实现 ElementUI 表单全局验证的解决方法，希望能为读者提供帮助。如有疑问欢迎留言，小编会及时回复。感谢对本站的支持！