vue 表单在用到 v-if，表单校验不生效_vue表单校验不触发change-CSDN博客

在使用ElementUI的表单校验时，如果用v-if控制显示隐藏，表单元素可能无法被校验。这是因为v-if在mounted阶段未渲染，导致规则未绑定。使用v-show则始终生成规则，即使元素隐藏。解决方案是在v-if元素上添加key值以避免复用，确保每个元素独立。这同样适用于v-for循环渲染的元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：

最近在用 element中的 form 表单校验的时候，因为有些字段是根据特殊条件来设置显示隐藏的，所以用了 v-if 控制显示；但是发现用 v-if 控制的表单元素总是无法被校验。

查找资源，发现原因原来是：
【1】使用 v-if：element在对form表单中带有prop属性的子组件进行校验规则绑定时，是在vue声明周期mounted完成的。而v-if用来切换的元素是会被销毁的，导致了v-if内的表单项，由于在mounted时期没有进行渲染，所以规则也没有绑定上，因此初始化时不符合显示条件的不会生成规则，导致后面切换条件，显示的输入框的校验不会生效。
【2】使用 v-show：初始化时会生成所有的规则，即使隐藏了也会进行规则校验。

解决方案：

给设置 v-if 的元素加上key值，如下所示：

<div v-if="activeStep==3">
   <el-form-item label="标题" prop="title" key="title">
      <el-input :maxLength="20" v-model="form.title" placeholder="请输入标题" clearable>/el-input>
   </el-form-item>
</div>

规则如下：

rules: {
   title: [{ required: true, message: '请输入标题', trigger: 'blur' }]
}

原因：

因为在v-if切换标签时，多个相同的标签被渲染，如果不添加key来区分则会出现复用的情况（同理，所以 v-for 渲染的标签也要加key来区分）。而原本这些标签每一个都是独立的，所以需要添加key来做区分。