表单序列化时name属性缺失会导致字段丢失，必须为所有可提交控件设置name；推荐使用FormData替代手动遍历，注意处理多选、类型转换和特殊值；复杂场景建议用工具函数封装并配合schema校验。
表单序列化时，name 属性缺失会导致字段丢失
HTML 表单转 JSON 的核心是读取所有带 name 的可提交控件（<input>、<select>、<textarea>）。如果某个字段没写 name，它根本不会出现在序列化结果里——哪怕有 id 或 data-* 属性也没用。
常见踩坑点：
-
<input type="checkbox">必须有name，否则勾选状态无法被收集 -
<button>默认不提交，即使有name也不会进数据（除非是type="submit"且被点击） -
<input type="file">的name会出现在键名中，但值是文件对象，不能直接 JSON.stringify —— 需单独处理
用 FormData 提取数据比遍历 DOM 更可靠
手动遍历 form.elements 容易漏掉禁用项、重复 name（如多选 checkbox）、或类型转换错误。而 FormData 内置了浏览器表单提交逻辑，能正确处理：disabled 跳过、checked 状态、multiple select、空值过滤等。
实操建议：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 用
new FormData(formElement)构造实例，不要传event.target（可能不是 form 元素） - 遍历时用
for (const [key, value] of formData.entries())，避免用formData.get()——后者只返回第一个同名值，对 checkbox 多选不安全 - 若需兼容 IE，必须降级为手动遍历 + 判断
element.name和element.type
const form = document.querySelector('form');
const data = {};
for (const [key, value] of new FormData(form).entries()) {
if (!data[key]) data[key] = value;
else if (Array.isArray(data[key])) data[key].push(value);
else data[key] = [data[key], value];
}
JSON.stringify() 前要处理非字符串/非普通对象值
直接 JSON.stringify(formData) 得到的是空对象 {}，因为 FormData 不是普通对象。必须先转成 plain object，再处理特殊类型：
-
<input type="number">的值是字符串，需用Number()转换（注意""会变0） -
<input type="date">值是"2024-05-20"字符串，一般无需转，但后端要求时间戳就得new Date(value).getTime() -
<select multiple>的多个值在FormData中是多次 entry，需合并为数组（见上例） - 布尔值只能靠
type="checkbox"的 presence 判断，value永远是字符串（默认"on"）
复杂表单建议用 formToObject 工具函数封装逻辑
手写转换容易漏边界情况（如嵌套 name 如 user[name]、数组语法 items[0][price]），不如用轻量工具函数统一处理。自己写的话，重点控制三件事：
- 是否保留空字符串（
<input value="">） - 如何处理重复 key（覆盖？合并为数组？）
- 是否递归解析方括号命名（
address[city]→{address: {city: "..."}}）
简单场景下，一个 10 行函数足够：检查 element.name、跳过 disabled、按 type 分支处理 checkbox/radio/select[multiple]，最后用 Object.fromEntries() 聚合。
真正麻烦的从来不是序列化本身，而是表单结构和后端约定不一致时，字段映射、类型校验、错误提示这些环节——得靠 schema 或运行时校验补位。
