使用submit()从链接提交的表单无法被onsubmit处理程序捕获

Answer 1

为了提供合理明确的答案，

HTML 表单提交算法第 5 项规定，如果表单未通过调用 Submit 方法提交，则仅调度提交事件（这意味着如果通过按钮提交，则仅调度提交事件）或其他隐式方法，例如，当焦点位于输入类型文本元素上时按 Enter 键）。

如果没有调度提交事件，则不会调用提交处理程序。

这与

DOM 2 HTML 规范不同，后者规定提交方法应该执行提交按钮的操作。

所以如果你想使用脚本提交表单，你应该手动调用提交监听器。如果监听器是使用

addEventListener 添加的，那么您需要记住这一点并调用它，因为您无法通过检查表单来发现它（如下所示）。

如果侦听器设置为内联，或添加到 DOM

onsubmit 属性，您可以执行以下操作：

<form onsubmit="return validate(this);" ...>
  ...
</form>
<button onclick="doSubmit()">submit form</button>

<script>
function doSubmit() {
  var form = document.forms[0];

  if (form.onsubmit) {
    var result = form.onsubmit.call(form);
  }

  if (result !== false) {
    form.submit();
  }
}
</script>

如果您需要传递参数或做其他事情，生活会更艰难。

Answer 2

这就是

form.submit

的行为方式；

表单的 onsubmit 事件处理程序（例如，onsubmit="return false;")

调用此方法时不会被触发 基于 Gecko 的应用程序。一般来说，不能保证 由 HTML 用户代理调用

使

onsubmit

 调用一个函数并简单地调用该函数 

onclick

。

Answer 3

您可以手动构造和分派提交事件，而不是使用表单

submit()

 函数以编程方式提交表单。

const buttonEl = document.getElementById('your-button');
const formEl = document.getElementById('your-form');

buttonEl.addEventListener('click', () => {
   const submitEvent = new Event('submit');
   formEl.dispatchEvent(submitEvent);
});

这意味着表单提交事件上的任何其他侦听器都将触发：

formEl.addEventListener('submit', (submitEvent) => {
    console.log('The form submitted!');
});

Answer 4

使用表单元素的

requestSubmit()

方法提交表单并触发事件。

引用 MDN 上的

HTMLFormElement: requestSubmit() 方法:

显而易见的问题是：既然我们从一开始就有了 Submit() 方法，为什么还要存在这个方法？

答案很简单。 Submit() 提交表单，但仅此而已。另一方面，requestSubmit() 的作用就像单击了提交按钮一样。表单的内容经过验证，只有验证成功后才会提交表单。提交表单后，提交事件将发送回表单对象。