HTML跨表单提交的单元测试写法-html教程-PHP中文网

最直接验证跨表单提交是否静默失败的方法是打开DevTools Network标签页并勾选Preserve log后点击按钮，观察是否有请求发出；常见原因为form属性值与目标form id不一致、按钮缺少type="submit"、目标form不存在或被移除、按钮已嵌套在其他form内。

html跨表单提交的单元测试写法

用 DevTools Network 验证跨表单提交是否触发

跨表单提交静默失败时，浏览器不会报错，但请求根本发不出去。最直接的验证方式是打开 DevTools → Network 标签页 → 勾选 Preserve log → 点击按钮，观察是否有新请求出现。

常见无请求原因：

form 属性值和目标不一致（大小写、下划线/连字符、空格、引号）
按钮没写 type="submit"（默认是 type="button"，不触发提交）
目标元素实际不存在，或被 JS 动态移除但 DOM 未更新
按钮本身已嵌套在某个内（此时 form 属性被忽略）

用 curl 模拟提交验证后端是否接收正确字段

前端 JS 可能拦截、改写或添加额外参数，导致你看到的“成功”只是假象。必须绕过所有前端逻辑，直连后端验证原始字段是否按预期到达。

例如有：

对应测试命令为：

curl -X POST http://localhost:3000/api/update \
  -d "name=Alice" \
  -d "email=a@example.com" \
  -d "action=save"

注意点：

若后端要求 Content-Type: application/json，需加 -H "Content-Type: application/json" 并用 -d '{"name":"Alice"}'
若有 CSRF token，必须从页面源码中手动提取，再通过 -d 或 -H 补上
上传文件不能用 -d，得用 -F "file=@/path/to/file"，此时自动切为 multipart/form-data

用 JavaScript 检查 event.submitter 是否准确指向按钮

当多个按钮共用同一 form 属性时，后端常需区分触发源（如 “保存草稿” vs “正式发布”）。关键依赖 event.submitter，但它在 Safari 15.4 之前不支持，且仅对 type="submit" 生效。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

测试代码示例：

document.getElementById('user-form').addEventListener('submit', function(e) {
  console.log('submitter:', e.submitter);
  console.log('submitter.name:', e.submitter?.name);
});

验证要点：

点击不同按钮，e.submitter.name 是否分别为 "action"、"draft" 等预期值
在 Safari 15.3 或更旧版本中，e.submitter 为 undefined，需 fallback 到 data-action + click 监听
若用 form.submit() 调用，e.submitter 恒为 null，不可用于区分