vue 3嵌套校验需确保prop路径、model数据路径、rules键名三者严格一致；prop须写全路径如"user.name"，rules对应设为rules["user.name"]；数组字段用动态索引如"tabledata.0.email"；响应式推荐用reactive而非ref包裹嵌套对象；复杂逻辑应抽离为自定义validator函数。
Vue 3 中处理复杂嵌套对象的字段校验，核心在于让 prop 路径、model 数据路径、rules 键名三者严格一致，并确保响应式系统能正确追踪深层属性变化。直接用 el-form 的默认写法容易失效，必须按嵌套结构显式声明路径。
嵌套对象字段的 prop 写法要带完整路径
比如表单数据是：form = { user: { name: '', email: '' } }，那对应字段的 prop 就不能只写 "name"，而必须写成 "user.name"：
<el-form-item label="姓名" prop="user.name"></el-form-item><el-input v-model="form.user.name"></el-input>
同时，rules 里也要用相同路径作为键名：rules["user.name"]，否则校验器找不到目标字段。
嵌套数组字段要用动态索引（如 tableData.0.email）
当数据是数组时（例如表格行数据 form.tableData = [{ email: '' }]），每个单元格的 prop 需拼接索引：
-
:prop="`tableData.${$index}.email`"—— 模板中用模板字符串动态生成 -
rules["tableData.0.email"]这类写法不实用，应统一用对象结构定义规则，键名与 prop 完全匹配 - 注意：Element Plus 的
validateField方法支持传入这种带点号的路径字符串，可单独触发某一项校验
避免响应式丢失：别用浅层 ref 包裹嵌套对象
如果直接写 const form = ref({ user: { name: '' } })，修改 form.value.user.name 可能不会触发更新。更稳妥的方式是：
- 用
reactive创建响应式对象：const form = reactive({ user: { name: '' } }) - 或用
ref+shallowRef配合toRaw处理深层变更（适合大对象） - VeeValidate 场景下，推荐用
useForm()而非<form></form>组件，它内部基于reactive管理 values，天然支持authData.name这类路径
跨字段联动校验建议抽离为自定义 validator
比如“确认密码”需比对“密码”，或“结束时间”不能早于“开始时间”，这类逻辑不适合塞进 rules 的静态配置里：
- 写一个函数，接收
rule、value、callback三个参数 - 在函数内读取当前 form 其他字段值（如
form.password），做判断后调用callback(new Error('...'))或callback() - 把该函数赋给 rules 中对应字段的
validator属性
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
