本文介绍如何利用原生 JavaScript 的 FormData API 遍历页面中所有匹配的表单（如 id^="form-"），自动收集各表单内命名字段的值（包括文本框、复选框等），并结构化为统一的对象数组，避免 jQuery 混用导致的 .val() 调用错误。
本文介绍如何利用原生 javascript 的 `formdata` api 遍历页面中所有匹配的表单（如 `id^="form-"`），自动收集各表单内命名字段的值（包括文本框、复选框等），并结构化为统一的对象数组，避免 jquery 混用导致的 `.val()` 调用错误。
在实际开发中，当页面存在多个动态生成的表单（例如 form-34、form-35）时，手动遍历每个表单并逐个读取 <input> 值容易出错——尤其当混用原生 DOM 元素与 jQuery 对象时（如 $inputs[0].val() 会报错，因为原生 DOM 元素没有 .val() 方法）。更健壮、语义清晰且兼容性良好的方案是：完全采用原生 Web API，借助 FormData 自动序列化表单数据。
FormData 构造函数接受一个 <form></form> 元素作为参数，能自动提取所有具有 name 属性的控件值（支持 text、checkbox、radio、select 等），对未勾选的 checkbox 返回空字符串（可通过后续逻辑过滤），无需关心 DOM 层级或选择器拼接。
以下为推荐实现：
function next() {
// 获取所有 form 元素（可按需替换为 querySelectorAll('[id^="form-"]')）
const forms = document.querySelectorAll('form[id^="form-"]');
// 将 NodeList 转为数组，并为每个 form 构建数据对象
const arrayOutput = Array.from(forms).map(form => {
const formData = new FormData(form);
const obj = {};
// 遍历 FormData 键值对，注入对象
for (const [key, value] of formData.entries()) {
obj[key] = value;
}
return obj;
});
console.log(arrayOutput);
// 示例输出：
// [
// { name: "iPhone", yes: "on", no: "" },
// { name: "Galaxy", yes: "", no: "on" }
// ]
}
✅ 关键优势说明：
- ✅ 无需 jQuery：避免
$inputs[0].val()类型错误（原生元素无.val()）； - ✅ 自动处理复选框：已勾选返回
"on"或自定义value，未勾选则不包含该键（注：若需显式记录false，可结合form.elements手动判断）； - ✅ 支持多值字段（如
name="tag"多个 checkbox）：FormData会多次调用.entries()，可用Map或数组聚合； - ✅ 语义清晰、可维护性强：脱离硬编码索引（如
$inputs[0]），按name属性自动映射。
⚠️ 注意事项：
- 所有
<input>、<select></select>、<textarea></textarea>必须设置name属性，否则FormData不会采集； - 同名多控件（如多个
name="tag"）将按提交顺序依次返回，建议后端接收数组或使用new FormData(form).getAll('tag')； - 若需兼容 IE，
FormData需 polyfill，但现代项目（≥ Edge 12 / Chrome 21）均原生支持。
综上，放弃基于索引的手动取值，拥抱 FormData + entries() 是提取多表单数据最简洁、可靠的方式。
