requestSubmit 与 form.submit 有什么区别

在自定义按钮、弹窗确认或异步流程里，开发者经常会把 form.requestSubmit() 和 form.submit() 当成同一个动作。它们都会让表单发起提交，但触发的浏览器语义完全不同：前者更像用户点击了提交按钮，会参与原生约束校验并触发 submit 事件；后者只是直接提交表单，跳过约束校验，也不会触发 submit 事件。

关键差异在于是否模拟点击提交按钮

requestSubmit(submitter) 的设计目标是“请求表单按照某个提交按钮提交”。不传参数时，表单本身作为提交者；传入按钮时，按钮上的 name、value 以及 formmethod、formaction 等覆盖属性都可以参与提交语义。submit() 没有 submitter 参数，只关心把表单送出去。

调用`requestSubmit`会完整触发表单的验证逻辑、`submit`事件，也能正确携带对应提交按钮的提交数据，而原生的`form.submit`方法会绕过所有表单校验和提交事件监听，直接发起表单跳转，这是两者最核心的差异。

需要校验和事件链时使用 requestSubmit

下面的写法适合“用户确认后再提交”的场景。它保留浏览器的 required 校验，并让已有的 submit 监听器继续工作。代码中的按钮属于同一个表单，所以还能携带提交按钮自己的字段。

const form = document.querySelector('#profile-form');
const saveButton = form.querySelector('[data-action="save"]');

form.addEventListener('submit', (event) => {
  // 统一拦截事件，确认通过后再交给 fetch 或其他提交逻辑。
  event.preventDefault();
  console.log('准备提交', new FormData(form));
});

document.querySelector('#confirm-save').addEventListener('click', () => {
  // requestSubmit 会先执行原生约束校验，再触发 submit 事件。
  form.requestSubmit(saveButton);
});

如果 saveButton 上有 name="action" value="save"，这个按钮字段也会按提交按钮语义进入提交数据。传入的按钮不是当前表单成员时，浏览器会抛出 NotFoundError；传入普通的 div 等非提交控件则会抛出 TypeError。

只做直接提交时才使用 form.submit

form.submit() 适合业务代码已经完成校验，并且明确不需要原生校验和 submit 监听器的内部路径。例如数据已经由自定义校验器整理完毕，接下来只需要交给浏览器执行默认提交：

const form = document.querySelector('#import-form');
const payload = readImportState();

if (payload.ok) {
  // 自定义校验已完成；这里故意绕过原生校验和 submit 事件。
  form.submit();
} else {
  // 直接提交不会替你触发 invalid 提示，所以要自行展示错误。
  showImportError(payload.message);
}

不要把 submit() 当成“更可靠的 requestSubmit”。它绕过了浏览器约束校验，已有的 onsubmit 或 addEventListener('submit', ...) 也不会运行。如果业务依赖这些监听器来注入隐藏字段、埋点或阻止重复提交，改用 requestSubmit。

生产代码的选择与排查清单

1. 先看校验责任。还要依赖 required、minlength、pattern 或浏览器提示，就选 requestSubmit。
2. 再看事件责任。需要执行 submit 监听器、统一埋点或拦截默认行为，也选 requestSubmit。
3. 确认按钮边界。传入的 submitter 必须在表单内，或通过 form 属性明确关联；按钮的覆盖属性可能改变 action 或 method。
4. 检查命名冲突。不要给表单控件设置 name="submit" 或 id="submit"，否则它可能遮蔽 form.submit 方法，导致“submit is not a function”。
5. 处理兼容性。requestSubmit 已在现代浏览器中广泛可用；需要兼容更早环境时，可检测方法是否存在，再决定是提示升级、补充校验后降级，还是直接调用 submit。

function submitFormSafely(form, submitter) {
  // 优先保留提交按钮语义；旧环境降级前必须承担校验和事件缺失的代价。
  if (typeof form.requestSubmit === 'function') {
    form.requestSubmit(submitter);
    return;
  }
  form.submit();
}

常见问题

requestSubmit 会不会自动提交两次？

正常不会。一次调用对应一次提交请求；如果监听器里又调用了提交方法，才可能人为造成重复提交。

不传参数和传入按钮有什么区别？

不传参数时使用表单自身的提交语义；传入按钮后，会采用该按钮的覆盖属性，并可能携带它的 name/value 数据。

为什么 form.submit 不是函数？

常见原因是表单中存在 name 或 id 为 submit 的控件，遮蔽了原生方法。改名后再调用，或先避免这种字段命名。

可以把判断压缩成一句话：要“像点击按钮一样提交”，用 requestSubmit；要“跳过浏览器流程直接提交”，才用 form.submit。选择前先确认校验、事件和按钮字段分别由谁负责。