双层数据结构表单校验

### 双层数据结构表单校验的实现方法与示例 在 Vue 和 Element UI 的组合中，处理双层嵌套的数据结构进行表单校验时，需要特别注意规则定义和校验逻辑的设计。以下是一个完整的解决方案，涵盖规则定义、动态校验以及代码实现。 #### 规则定义 对于嵌套对象的校验规则，可以通过点号（`.`）来指定路径[^1]。例如，`human.name` 表示 `ruleForm.human.name` 的校验规则。如果存在更深层次的嵌套，可以继续使用点号连接路径。 ```javascript rules: { dog: [ { required: true, message: '请填写dog', trigger: 'blur' } ], 'human.name': [ { type: "string", required: true, message: '请填写名字', trigger: 'blur' } ], 'human.sex': [ { type: "string", required: true, message: '请填写性别', trigger: 'blur' } ] } ``` #### 动态校验逻辑 当表单结构更加复杂时，例如涉及多层循环或动态生成的表单项，可以参考 Vue 3 中的实现方式[^3]。通过将 `ref` 绑定为数组形式存储，可以方便地对每个子表单进行单独校验。 以下是一个基于 Vue 3 的实现示例： ```vue <template> <el-form :model="ruleForm" :rules="rules" ref="formRef"> <div v-for="(item, index) in ruleForm.humans" :key="index"> <el-form-item :prop="'humans.' + index + '.name'" :rules="rules['human.name']"> <el-input v-model="item.name" placeholder="请输入名字"></el-input> </el-form-item> <el-form-item :prop="'humans.' + index + '.sex'" :rules="rules['human.sex']"> <el-input v-model="item.sex" placeholder="请输入性别"></el-input> </el-form-item> </div> <el-form-item prop="dog" :rules="rules.dog"> <el-input v-model="ruleForm.dog" placeholder="请输入dog"></el-input> </el-form-item> <el-button @click="submitForm">提交</el-button> </el-form> </template> <script> import { ref } from "vue"; import { ElMessage } from "element-plus"; export default { setup() { const ruleForm = ref({ humans: [ { name: "", sex: "" }, { name: "", sex: "" } ], dog: "" }); const rules = { dog: [{ required: true, message: "请填写dog", trigger: "blur" }], "human.name": [ { type: "string", required: true, message: "请填写名字", trigger: "blur" } ], "human.sex": [ { type: "string", required: true, message: "请填写性别", trigger: "blur" } ] }; const formRef = ref(null); const submitForm = () => { formRef.value.validate((valid) => { if (valid) { ElMessage.success("提交成功！"); } else { ElMessage.error("表单校验失败，请检查输入！"); } }); }; return { ruleForm, rules, formRef, submitForm }; } }; </script> ``` #### 关键点解析 1. **动态路径绑定**：通过 `:prop="'humans.' + index + '.name'"` 动态绑定嵌套路径，确保校验规则能够正确匹配到对应的字段。 2. **规则复用**：将重复使用的规则提取为公共规则，避免冗余定义[^2]。 3. **多层循环校验**：对于多层嵌套的表单，可以通过 Vue 3 的 `ref` 数组形式存储每个子表单的引用，便于单独校验[^3]。 --- ###