Vue.js中使用$refs验证嵌套多表单问题求助

• 检查子表单name属性：确保每个子表单的name唯一，重复的name会导致验证器仅识别第一个匹配的表单实例。
• 验证规则关联配置：确认每个子表单的验证规则都绑定到对应嵌套字段路径上，比如父表单规则里要明确指定child1.field、child2.field这类差异化的字段路径，不能共用同一规则路径。
• 表单实例注册：如果使用Vue、React等框架的表单库，要确保所有子表单都正确注册到父表单实例中，没有漏注册后续子表单。
• 触发验证的方式：提交时调用父表单的全局验证方法，而非仅触发第一个子表单的验证；部分框架需手动遍历所有子表单调用验证，或确保父表单验证逻辑覆盖全部嵌套子表单。

举个Vue Element Plus表单的示例：

<!-- 父表单 -->
<el-form :model="parentForm" :rules="parentRules">
  <!-- 子表单1 -->
  <el-form-item prop="child1.name" label="子表单1">
    <el-input v-model="parentForm.child1.name" />
  </el-form-item>
  <!-- 子表单2 -->
  <el-form-item prop="child2.name" label="子表单2">
    <el-input v-model="parentForm.child2.name" />
  </el-form-item>
  <!-- 子表单3 -->
  <el-form-item prop="child3.name" label="子表单3">
    <el-input v-model="parentForm.child3.name" />
  </el-form-item>
</el-form>

<script setup>
const parentForm = ref({
  child1: { name: '' },
  child2: { name: '' },
  child3: { name: '' }
})

const parentRules = {
  'child1.name': [{ required: true, message: '此项必填', trigger: 'blur' }],
  'child2.name': [{ required: true, message: '此项必填', trigger: 'blur' }],
  'child3.name': [{ required: true, message: '此项必填', trigger: 'blur' }]
}
</script>

这里要注意prop路径必须和父表单model结构严格对应，且每个子表单的prop不能重复。

如果是动态生成的子表单，需确保新增子表单时同步添加对应验证规则，并用动态索引（如children[0].name、children[1].name）区分prop字段。

若以上排查都没问题，可检查验证器初始化逻辑，确认是否仅给第一个子表单绑定了验证事件，后续子表单未绑定。

内容的提问来源于stack exchange，提问作者Shadow-Monarach