Vue+Element UI表单校验提示不消失及无按钮触发验证解决方法

问题场景 #

使用Element UI的el-form配合async-validator做表单校验，其中包含一个自定义组件files-selector（内部封装了el-cascader）。点击按钮触发校验时，未选择内容会显示"Form required"提示，但选择内容后，提示仍无法自动消失，即使校验已通过。

相关代码如下：

父组件表单代码 #

<el-form :model="ance" :rules="validationRules" ref="form">
  <el-form-item prop="files">
    <files-selector v-model="ance.files" />
  </el-form-item>
</el-form>

<script>
export default {
  data() {
    return {
      ance: {
        files: null
      }
    }
  },
  computed: {
    validationRules() {
      return {
        files: [
          {
            required: true,
            trigger: 'blur',
            message: 'Form required',
          },
        ],
      };
    }
  },
  methods: {
    saveAnce() {
      this.$refs.form.validate((isValid) => {
        if (!isValid) {
          return;
        }
        // 后续请求逻辑
      });
    }
  }
}
</script>

自定义files-selector组件代码 #

<template>
  <div>
    <el-cascader
      v-model="files"
      :options="filesOptionsForCascader"
      placeholder="Files"
      filterable
      :filter-method="filterMethod"
      :props="{
        emitPath: false,
      }"
    />
  </div>
</template>

原因分析 #

Element UI的el-form-item需要监听组件的特定事件（如change、blur）来更新校验状态，但自定义组件未正确传递这些事件，导致表单无法感知到值的变化，校验提示无法自动清除。

解决方法 #

1. 正确实现自定义组件的双向绑定并触发表单更新事件 #

Vue的v-model本质是model-value（Vue3）/value（Vue2）属性和update:model-value（Vue3）/input（Vue2）事件的语法糖，同时需要手动触发Element UI表单的el.form.change事件，让el-form-item感知值变化。

修改files-selector组件：

<template>
  <div>
    <el-cascader
      <!-- Vue3 使用 model-value，Vue2 改为 value -->
      :model-value="modelValue"
      :options="filesOptionsForCascader"
      placeholder="Files"
      filterable
      :filter-method="filterMethod"
      :props="{
        emitPath: false,
      }"
      @change="handleChange"
    />
  </div>
</template>

<script>
export default {
  props: {
    // Vue3 使用 model-value，Vue2 改为 value
    modelValue: {
      type: [Object, Array], // 根据实际值类型调整
      default: null
    }
  },
  methods: {
    handleChange(val) {
      // Vue3 触发 update:model-value，Vue2 触发 input 事件
      this.$emit('update:modelValue', val);
      // 触发Element UI表单的更新事件，通知el-form-item更新校验状态
      this.$parent.$emit('el.form.change', this.$parent.prop);
    }
  }
}
</script>

2. 调整校验规则的触发时机 #

将校验规则的trigger改为同时监听blur和change，确保值变化时能触发校验：

validationRules() {
  return {
    files: [
      {
        required: true,
        trigger: ['blur', 'change'], // 同时监听两个事件
        message: 'Form required',
      },
    ],
  };
}

3. 手动触发单个表单项校验（可选） #

如果上述方法仍未解决，可在父组件中监听ance.files的变化，手动触发对应表单项的校验：

watch: {
  'ance.files'(newVal) {
    // 当值存在时，手动校验files字段
    if (newVal) {
      this.$refs.form.validateField('files');
    }
  }
}

内容的提问来源于stack exchange，提问作者World's famous people