【Element Ui】 vue3中修改el-form的rules后不触发自动校验,再次修改rules时清除验证信息

在Vue 3中，如果您在修改el-form的rules属性后不触发自动验证，或者在修改rules后不清除之前的验证结果，可以尝试以下方法：

1. 确保在修改rules后调用validate方法。
2. 如果需要在修改rules后清除之前的验证结果，可以使用clearValidate方法。

以下是一个简单的示例：

<template>
  <el-form :model="form" :rules="rules" ref="formRef">
    <el-form-item prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-button @click="updateRules">更新规则并验证</el-button>
  </el-form>
</template>
 
<script setup>
import { ref } from 'vue';
import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus';
 
const form = ref({
  name: ''
});
 
const rules = ref({
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' }
  ]
});
 
const formRef = ElForm.useRef();
 
const updateRules = () => {
  rules.value = {
    name: [
      { required: true, message: '更新后的规则', trigger: 'blur' }
    ]
  };
  // 清除之前的验证结果
  formRef.value.clearValidate();
  // 触发新规则的验证
  formRef.value.validate((isValid) => {
    if (isValid) {
      console.log('验证通过');
    }
  });
};
</script>

在这个示例中，我们定义了一个form和rules响应式引用。通过updateRules函数更新rules的内容，并调用formRef.value.clearValidate()来清除之前的验证状态。然后使用formRef.value.validate方法进行新的验证。

请注意，在实际的Vue 3项目中，您可能需要导入Element Plus的组件和Vue的生命周期钩子以适应您的项目结构和配置。