当前位置：首页 > news >正文

自定义组件触发饿了么表单校验

news 2025/7/17 14:23:39

饿了么的表单控件，如果存在自定义组件更改了值，例如在el-from中存在原生input组件很有可能没法触发表单校验，下拉框或者弹框组件仍然是报红边框。
这是因为饿了么的输入框或者下拉框更改值的时候会自动触发表单校验，但是封装过后的组件无法触发校验表单校验。那么此时可以手动触发饿了么的表单校验。

源码分析

在packages/form/src/form-item.vue中，可以找到addValidateEvents方法，该方法是用来给el-form-item的子组件绑定校验事件的，如下：

addValidateEvents() {
  const rules = this.getRules();
  if (rules.length || this.required !== undefined) {
    this.$on('el.form.blur', this.onFieldBlur);
    this.$on('el.form.change', this.onFieldChange);
  }
}

在packages/input/src/input.vue中，可以找到el-input发送el.form.blur和el.form.change事件的代码，这里只贴出el.form.change的代码：

watch: {
  value(val) {
    this.$nextTick(this.resizeTextarea);
    if (this.validateEvent) {
      this.dispatch('ElFormItem', 'el.form.change', [val]);
    }
  }
}

这里用了dispatch方法，该方法的代码在src/mixins/emitter.js中：

dispatch(componentName, eventName, params) {
  var parent = this.$parent || this.$root;
  var name = parent.$options.componentName;
  while (parent && (!name || name !== componentName)) {
    parent = parent.$parent;
    if (parent) {
      name = parent.$options.componentName;
    }
  }
  if (parent) {
    parent.$emit.apply(parent, [eventName].concat(params));
  }
}

由此可以看出，要触发el-form的校验，需要el-form-item中的子组件去发布el.form.change或el.form.blur等事件，由el-form-item监听该事件，触发表单校验。

解决方案

方法一：在父页面中直接调用表单的校验方法validateField:

watch: {
  'passwordForm.newPassword': function() {
    this.$refs.passwordForm.validateField('newPassword')
  }
}

方法二：在父页面中发布组件的el.form.change等事件：

<input ref="input" @blur="handleBlur">
<script>
export default {
  methods: {
    handleBlur (val) {
      this.$refs.input.$emit('el.form.blur', val)
    }
  }
}
</script>

方法三：在子组件中发布el.form.change等事件，此时无需在父页面中做任何处理，其中dispatch方法直接将上面所说的emitter.js中的代码拷贝过来即可：

export default {
  methods: {
    dispatch(componentName, eventName, params) {
      // ... 从emitter.js中拷贝过来的代码
    },
    handleInput (e) {
      this.$emit('input', e.target.value)
      this.dispatch('ElFormItem', 'el.form.change', [e.target.value])
    }
  }
}

以下是我某项目的解决方法，使用的方法2，即找到el-form-item然后触发el.form.change事件。

 methods: {
	confirm() {
	      this.$emit("confirm", result);
	      this.$nextTick(() => {
	        parent && parent.$emit("el.form.blur", result); // 重点！触发表单校验 el.form.change, el.form.blur
       		parent && parent.$emit("el.form.change", result); // 重点！触发表单校验
      });
    },
   },
 // 找到el-form-item元素的代码
 mounted() {
   let parent = this.$parent;
   while (parent) { 
	   if (parent.$options.name === "ElFormItem") {
	     this.parent = parent;
	     break;
	   }
	   parent = parent.$parent;
   }
},