Element Plus动态表单项怎么设置校验规则？

宇文伟伟提问于 2026-02-01 14:23:29 阅读 50

框架

在用v-for循环渲染表单输入框时，发现设置的rules规则没生效。比如每个问题都要填写，但输入框不报错。

尝试过直接在rules对象里写数组，但控制台报prop not found错误。代码大概是这样：

<el-form :model="formData" :rules="rules">
  <elFormItem v-for="(q, index) in questions" :key="q.id" :prop="'answers.' + index">
    <el-input v-model="formData.answers[index]"></el-input>
  </elFormItem>
</el-form>

rules里写了：required: true，但没反应，求解怎么动态绑定校验规则？

Vue3 状态管理组件开发

我来解答赞 5 收藏

反馈

1 条解答

东俊 Dev Lv1

你的问题主要是动态表单项的校验规则没生效，这是因为 :prop 的绑定方式可能有问题，或者规则没有正确配置到对应的字段上。下面直接给解决方案：

首先确保你的 formData.answers 是一个数组，并且初始值不能为空（比如初始化为 []）。然后在 :prop 上绑定时需要加上父级字段名，像这样写：

<el-form :model="formData" :rules="rules" ref="formRef">

  <el-form-item 

    v-for="(q, index) in questions" 

    :key="q.id" 

    :prop="'answers.' + index"

    :rules="[{ required: true, message: '此项必填', trigger: 'blur' }]"

  >

    <el-input v-model="formData.answers[index]"></el-input>

  </el-form-item>

</el-form>

注意几点：
1. :prop 必须是完整的路径，形如 'answers.0'、'answers.1' 这样。
2. 如果你把规则直接写在 :rules 属性里，记得用数组包裹。
3. 确保 formData.answers 初始化时长度和 questions 一致，否则可能会报错。

另外提醒一下，如果数据来源是外部接口，一定要对返回的数据做严格校验和初始化处理，防止恶意构造的数据导致前端异常。比如说，可以加个默认值判断：

this.formData.answers = (this.questions || []).map(() => "");

这样基本就没问题了。如果你还需要更复杂的校验逻辑，可以扩展 rules，但记得触发时机（trigger）要设置对。

2026-02-01 15:03