Element UI 表单项自定义错误

背景

在 element UI 中，Form 组件提供了 rules 属性，用于校验表单项，但是当需要根据接口返回的错误信息进行校验时，就需要自定义校验函数，这里就会存在一个问题，当自定义校验函数中存在错误信息时，如何将错误信息设置到表单项上。目前 element UI 并没有像其他组件提供类似的 Form 实例方法 setFields 来设置表单项的错误信息，所以就需要自己单独实现自定义校验逻辑的设置功能。

简易思路

在 data 中定义一个自定义错误信息收集对象 formErrors ，格式 { fieldName: errorMessage }
提交表单调用校验接口后，将错误信息收集到 formErrors 中，并手动调用存在错误的 filed 校验
若自定义校验函数中当存在 formErrors[fieldName]，则抛出异常信息 errorMessage
最后，清空相应 formErrors[fieldName] 的值，防止其他方式出发自定义校验抛出该异常

实现

这里只描述核心逻辑，具体实现代码可参考线上 demo 示例

自定义提交校验

js 复制代码

export default {
  // 表单项 name 自定义校验
  const validateName = (rule, value, callback) => {
    // 获取当前表单项在 formErrors 中的提示信息
    const customMsg = get(this.formErrors, rule.field);
    // 存在抛出错误提示
    if (customMsg) {
      callback(new Error(customMsg));
    }
    callback();
  }

  data() {
    return {
      formErrors: {}, // 自定义错误收集对象 { name: '此名称已存在' }
      ruleForm: {
        name: "",
      },
      rules: {
        name: [
          { required: true, message: "姓名不能为空", trigger: ["change", "blur"] },
          { validator: validateName },
        ]
      },
    }
  }
}

表单提交

通过 axios 请求接口，获取接口返回的错误信息，然后将错误信息收集到 formErrors 中，最后手动调用 ruleForm 中存在错误的表单项进行校验，最后清空 formErrors 中的错误信息。

js 复制代码

async submitForm() {
  // 调用校验接口看是否存在错误信息
  const errors = await axios(...)

  if (!isEmpty(errors)) {
    // 循环错误信息【收集、触发校验、清空】
    Object.keys(errors).forEach((key) => {
      // 收集 errors
      this.$set(this.formErrors, key, errors[key]);
      // 手动校验需要校验的表单项
      this.$refs.ruleForm.validateField(key);
      // 清空
      this.$set(this.formErrors, key, "");
    });
  }
}

拓展

如果后面 element UI 后面有像 arco.design vue 的 Form 组件有提供 form.setFields 方法，那么就可以考虑尝试将接口错误信息设置提升到全局请求响应拦截器中统一处理。相关 issue

在接口响应拦截器中统一处理有以下优点：

提交接口即是校验接口，无需单独再提供一个校验接口
统一处理表单错误信息设置，无需再单独组件下处理

结语

以上就是本文的全部内容了，希望对你的学习或者工作有所帮助，如果有任何疑问或者建议都可以在下方留言，我会及时回复大家。