本文介绍如何高效、健壮地遍历页面中多个表单，利用原生 FormData API 提取所有字段值并组织为结构化对象数组，避免 jQuery 选择器误用和 DOM 元素方法调用错误。
本文介绍如何高效、健壮地遍历页面中多个表单，利用原生 `formdata` api 提取所有字段值并组织为结构化对象数组，避免 jquery 选择器误用和 dom 元素方法调用错误。
在实际开发中，当页面包含多个动态生成的表单（如 id="form-34"、id="form-35"）时，手动通过 querySelectorAll + jQuery 拼接选择器（如 $('#form-34 :input')）容易引发两类典型问题：一是 $inputs[0].val() 报错（因原生 DOM 元素无 .val() 方法，仅 jQuery 对象才有），二是重复 ID（如多个 id="name"）导致 document.getElementById 行为不可靠。
更优雅、标准且兼容性良好的解法是完全脱离 jQuery 依赖，采用现代原生 Web API：
✅ 推荐方案：document.forms + FormData
document.forms 返回页面中所有 <form></form> 元素的 HTMLCollection，可通过扩展运算符 [...document.forms] 转为数组，再结合 FormData 构造函数——它会自动收集表单内所有具有 name 属性的可提交控件（<input>、<select></select>、<textarea></textarea> 等），包括 checkbox 的布尔状态（勾选时值为 "on" 或显式 value，未勾选则不包含该键）。
function next() {
const arrayOutput = [...document.forms]
.filter(form => form.id.startsWith('form-')) // 可选：精准筛选目标表单
.map(form => {
const formData = new FormData(form);
const obj = {};
for (const [key, value] of formData.entries()) {
obj[key] = value;
}
return obj;
});
console.log(arrayOutput);
// 示例输出：
// [
// { name: "ModelA", yes: "on" },
// { name: "ModelB", no: "on" }
// ]
}
? 注意：
FormData.entries()返回的是迭代器，需用for...of或展开为数组（[...formData.entries()]）遍历；若需处理 checkbox/radio 的布尔逻辑（如转为true/false），可在赋值时增强判断：obj[key] = value === 'on' ? true : value;
⚠️ 原代码问题解析
-
$(query)返回 jQuery 对象，但$inputs[0]是原生 DOM 元素 → 无.val()方法（应写为$inputs.eq(0).val()或$( $inputs[0] ).val()）； - 多个表单内存在重复
id="name"、id="yes"—— 违反 HTML 唯一性规范，document.getElementById行为不可预测； - 硬编码索引
[$inputs[0], $inputs[1], $inputs[2]]脆弱，一旦表单结构变更即崩溃。
✅ 最佳实践建议
-
语义化命名：将
id="name"改为name="model_name"，保留id用于样式或 JS 定位（如id="form-34"），name属性才是表单数据提交的关键标识； -
无障碍与健壮性：为 checkbox 添加
value属性（如<input type="checkbox" name="yes" value="true">），确保未勾选时不传参、勾选时传明确值； - 无需 jQuery：本方案纯原生，减小包体积，提升性能与维护性。
此方法简洁、可靠、符合标准，适用于任意数量、任意结构的表单批量数据采集场景。
