FormData跨表单提交需手动收集：原生构造函数仅遍历form直属子元素，故须用data属性定位字段，显式append并处理disabled、checkbox/radio、multiple select及file等特殊情况。
跨表单提交时 FormData 无法自动收集非直属子元素
浏览器原生的 FormData 构造函数只遍历传入 form 元素的直属后代（form.elements），不会递归查找 DOM 树中其他位置的表单项。如果你把 拆到多个 form 标签里，或用 display: none 移出表单结构但保留在页面上，它们默认不会被采集。
常见错误现象：new FormData(document.querySelector('#form-a')) 返回空或漏字段，尤其在模态框、分步表单、动态挂载组件场景下高频出现。
- 必须显式获取所有目标
input、select、textarea元素，再逐个 append 到FormData - 注意过滤掉
disabled和type="hidden"以外的隐藏域（如type="password"仍需提交） - 多选
需手动遍历selectedOptions，不能只取.value
用 querySelectorAll 批量抓取并校验表单项
比遍历整个文档更稳妥的方式是给跨表单字段统一加 data-form-group="order" 这类语义化属性，再按组提取：
const fields = document.querySelectorAll('[data-form-group="order"] input, [data-form-group="order"] select, [data-form-group="order"] textarea');
const fd = new FormData();
fields.forEach(el => {
if (el.disabled || el.type === 'file' && !el.files.length) return;
if (el.type === 'checkbox' || el.type === 'radio') {
if (el.checked) fd.append(el.name, el.value);
} else if (el.tagName === 'SELECT' && el.multiple) {
Array.from(el.selectedOptions).forEach(opt => fd.append(el.name, opt.value));
} else {
fd.append(el.name, el.value);
}
});
关键点：不依赖 form 元素边界，靠属性定位；对 checkbox/radio 做 checked 判断；file 类型要检查 files.length，否则会 append 空值。
serializeArray() 类似逻辑的手动实现（兼容旧环境）
jQuery 的 serializeArray() 可跨表单工作，但若项目无 jQuery 或需轻量控制，可手写等效逻辑返回键值对数组，再转 FormData 或 URLSearchParams：
使用场景：需要先校验、映射字段名（如后端要求 user[email]）、或做中间转换（如日期格式化）。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 遍历所有匹配字段时，用
el.name为空则跳过（防无 name 的调试残留） -
el.name包含方括号（如addr[city]）时，后端解析可能依赖，不要擅自扁平化 - 若字段有
data-serialize="false"，可主动跳过，用于临时屏蔽某字段
性能影响：DOM 查询范围越小越好，避免 document.querySelectorAll('input') 全局扫；建议限定父容器或用 data 属性分区。
文件字段跨表单提交的坑：FileList 不可直接赋值
如果跨表单包含 ，不能用 fd.append('file', input.value) —— input.value 是路径字符串（且现代浏览器为空），必须用 input.files 得到 FileList。
容易踩的坑：
-
FileList是只读类数组，不能 push 或 splice，append 时直接传input.files[0]或用扩展运算符转数组再循环 - 若允许多文件，别漏掉
input.multiple === true的判断，否则只取第一个 - 从剪贴板或拖拽来的文件对象，没有
.name或.lastModified，后端可能校验失败，需补全
复杂点往往不在序列化本身，而在字段状态同步 —— 比如用户切换步骤后修改了前一步的输入框，但 DOM 引用已失效，或 Vue/React 中 ref 未及时更新。这种时候靠 data 属性 + 事件委托比硬查 DOM 更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
