跨表单提交本质不存在，浏览器仅识别单个form内的可提交元素；验证失效源于DOM可访问性与校验时机脱节，form.checkValidity()只检测自身内部带name的启用控件。
跨表单提交本身不存在——form 是数据收集的边界，浏览器只认一个 <form></form> 容器内的可提交元素。所谓“跨表单”，实际是多个独立 form、或用 form 属性外挂按钮、或用 FormData 手动聚合字段导致的验证断裂。验证失效的根源从来不是“跨”，而是 DOM 可访问性与校验触发时机脱节。
为什么 form.checkValidity() 对“跨表单”字段完全没反应
form.checkValidity() 只扫描当前 form 元素内部、未被 disabled、且具有 name 属性的可提交控件（input、select、textarea 等）。它不关心你 JS 里怎么拼接数据，也不读取其他 form 或脱离容器的 input。
- 用
form="otherForm"把按钮挂在另一个form外？按钮点击仍只触发表单原生提交，但checkValidity()必须显式调用目标form实例，不能靠按钮自动关联 - 用
FormData手动 append 多个表单的字段？那只是数据组装，和 HTML 原生验证机制彻底无关 - 把部分
input移出form标签再用 JS 收集？它们根本不在任何form.elements里，required、pattern属性形同虚设
如何让分散字段参与统一校验
核心思路：放弃“让浏览器自动管”，改用 JavaScript 主动收集 + 统一规则执行。关键不是拼 DOM，而是对齐数据源与校验入口。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 所有待校验字段必须有
name属性，即使不在同一个form内 - 用
document.querySelectorAll('[name]')或按 class 分组选取，避免硬编码 ID - 逐个调用
input.checkValidity()（注意：这是 input 方法，不是 form 的），比直接读.value更可靠——它会触发该字段自身的required、type、pattern等原生约束 - 遇到
setCustomValidity()设置过错误文案的字段，务必在每次输入后调用input.setCustomValidity('')清空状态，否则后续输入永远卡在旧错误 - 示例逻辑：
const fields = document.querySelectorAll('input[name], select[name], textarea[name]'); let isValid = true; fields.forEach(field => { if (!field.checkValidity()) { isValid = false; field.reportValidity(); // 弹原生提示 } }); if (isValid) { /* 提交 */ }
FormData 提交时如何补全验证逻辑
用 FormData + fetch 是常见选择，但它绕过了所有 HTML5 表单验证钩子。此时验证必须前置，且不能依赖 submit 事件默认行为。
立即学习“前端免费学习笔记（深入）”；
- 监听按钮 click，而非表单 submit —— 因为按钮可能不在 form 内，或用了
event.preventDefault() - 先执行完整校验（如上一节方法），仅当全部通过才构造
FormData - 不要用
new FormData(form)收集分散字段：它只会拿到那个特定form内的元素，漏掉其他来源 - 手动构建更可控：
const fd = new FormData(); fields.forEach(field => { if (field.name && field.value !== '') { fd.append(field.name, field.value); } }); - 若字段含文件，确保
<input type="file">的name一致，FormData会自动处理多文件
最容易被忽略的是：当字段动态插入（比如分步表单切换时 append 新 input），它们的 required 属性不会自动激活校验，必须显式调用 input.checkValidity() 或触发一次 input 事件来初始化状态；另外，移动端 WebView 对 reportValidity() 支持不稳定，关键流程建议用自定义 UI 提示兜底。
