表单字段 name 属性通过约定命名规则（如 userprofile 或 user.profile.email）映射嵌套对象结构，依赖后端或 js 解析器支持对应语法，而非浏览器原生能力；需避免空格、混用符号，并确保动态字段带唯一索引以防止覆盖。
表单字段 name 属性怎么映射到嵌套对象结构
HTML 表单本身不理解“对象”或“嵌套”，它只认 name 字符串。后端或 JS 解析时，靠约定好的命名规则还原层级关系。比如 user[profile][email] 或 user.profile.email 这类写法，本质是字符串解析逻辑，不是浏览器原生支持。
常见错误现象：提交后后端收不到 address.city，只收到扁平的 address.city 字符串键，或整个字段丢失——往往是因为 JS 序列化没按表单名规则处理，或后端解析器未启用对应模式（如 Express 的 extended: true）。
-
name="user[name]"→ 解析为{ user: { name: "xxx" } }（PHP/Express 默认支持方括号语法） -
name="user.profile.phone"→ 需 JS 手动切分或后端启用点号解析（如某些 Node.js 中间件需额外配置） - 数组字段用
name="items[]"，多个同名项会自动聚合成数组；带索引如name="items[0][id]"更利于还原结构 - 避免空格、点号、括号混用：如
name="user. profile.email"（带空格）会导致解析失败
多级联动表单如何保持数据模型一致性
用户改“省份”后，“城市”下拉框重置但未清空已选值，或“城市”选项变了但 formdata.get("city") 还返回旧值——这是 DOM 状态和数据模型脱节的典型表现。
关键不在“怎么更新下拉框”，而在“谁拥有最终数据源”。如果用原生表单，FormData 只捕获当前 DOM 值；如果用 JS 数据模型驱动渲染（如 lit-html 或 React），必须确保每次 DOM 更新后同步触发模型赋值，而不是反过来。
- 不要依赖
change事件去手动更新对象属性，容易漏掉input实时输入、键盘粘贴等场景 - 对 select 元素，
value改变后立即调用element.dispatchEvent(new Event('change', { bubbles: true }))可补全事件链 - 禁用字段（
disabled）不会被FormData收集，若需保留值，改用readonly+ CSS 隐藏光标 - 动态增删行时，确保每组字段的
name带唯一索引（如users[1].role），否则后端无法区分顺序
复杂表单提交时如何校验嵌套字段有效性
浏览器原生 checkValidity() 只检查单个元素，reportValidity() 也只触发当前字段提示。面对 address[postalCode] 和 address[country] 联合校验（比如中国邮编必须6位，美国必须5+4），原生机制完全失效。
必须自己构造校验上下文：把相关字段的 name 映射到同一校验单元，再统一执行逻辑。否则会出现“邮编标红但国家没标，或反之”这种割裂体验。
- 用
form.querySelectorAll('[name^="address["]')批量获取 address 下所有字段，再逐个读.value - 不要在
submit事件里直接preventDefault()后弹 alert，应调用setCustomValidity()并触发reportValidity()让浏览器渲染原生气泡 - 服务器返回的错误字段路径（如
["address.postalCode"]）需转成选择器[name="address[postalCode]"]才能精准定位并标红 - 注意
required属性对select的坑：空选项值为""时，即使加了required，选中它也不会触发校验失败
表格内嵌表单时 name 冲突与重复问题
在一个 <table> 里循环渲染 10 行编辑行，每行都有 <code><input name="price">，提交后后端只收到最后一个值——因为同名字段被覆盖，FormData 默认只保留最后一个。
这不是 bug，是规范行为。解决方式不是“阻止覆盖”，而是让每个字段有唯一标识，再由接收方按规则重组。
- 必须给每行加索引：
name="items[0][price]"、name="items[1][price]"，而非简单用name="price" - 避免用
id当唯一标识：ID 仅用于 DOM 查找，FormData完全不看 ID - 如果用
<input type="hidden" name="items[][id]" value="123">配合其他字段，注意 PHP 等后端会把空索引[]自动编号，但 JSFormData不会，需手动处理 - 表格中混合使用
radio时，确保所有同组name完全一致（包括索引），否则无法互斥
name 字符串和后端解析器之间的隐式契约——它既不是纯前端逻辑，也不是纯后端逻辑，而是一条需要双方对齐的协议线。写错一个括号位置，或漏配一个解析选项，整条链就断了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
