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 vueForm 组件有提供 form.setFields 方法,那么就可以考虑尝试将接口错误信息设置提升到全局请求响应拦截器中统一处理。相关 issue

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

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

结语

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

相关推荐
袁煦丞15 分钟前
AI直接出答案!Perplexica开源搜索引擎:cpolar内网穿透实验室第534个成功挑战
前端·程序员·远程工作
Hilaku17 分钟前
用“人话”讲明白10个最常用的正则表达式
前端·javascript·正则表达式
木叶丸26 分钟前
跨平台方案该如何选择?
android·前端·ios
LL.。28 分钟前
同步回调和异步回调
开发语言·前端·javascript
网络点点滴33 分钟前
Vue如何处理数据、v-HTML的使用及总结
前端·vue.js·html
运维咖啡吧34 分钟前
周一才上线的网站,单单今天已经超过1000访问了
前端·程序员·ai编程
世界哪有真情37 分钟前
用虚拟IP扩容端口池:解决高并发WebSocket端口耗尽问题
前端·后端·websocket
前端世界37 分钟前
打造一个可维护、可复用的前端权限控制方案(含完整Demo)
前端
LeQi43 分钟前
当!important成为代码毒瘤:你的项目是不是也中了招?
前端·css·程序员
玲小珑44 分钟前
Next.js 教程系列(九)增量静态再生 (ISR):动态更新的静态内容
前端·next.js