如何防止表单提交？

Question

如何防止表单提交？我有一个表格，里面有个提交按钮。然而，我想以某种方式“捕捉”提交事件并防止其发生。有什么办法我能做到吗？我无法修改Submit按钮，因为它是自定义控件的一部分。

Answer 1

不像其他答案，返回false只是部分答案。考虑在返回语句之前发生JS错误的情况.

HTML

<form onsubmit="return mySubmitFunction(event)">
  ...</form>

剧本

function mySubmitFunction(){
  someBug()
  return false;}

回归false这里不会执行，表单将以任何方式提交。你也应该打电话给preventDefault若要防止Ajax表单提交的默认表单操作，请执行以下操作。

function mySubmitFunction(e) {
  e.preventDefault();
  someBug();
  return false;}

在这种情况下，即使有错误，表单也不会提交！

或者，try...catch可以用块。

function mySubmit(e) { 
  e.preventDefault(); 
  try {
   someBug();
  } catch (e) {
   throw new Error(e.message);
  }
  return false;}

Answer 2

可以使用内联事件。onsubmit像这样

<form onsubmit="alert('stop submit'); return false;" >

或

<script>
   function toSubmit(){
      alert('I will not submit');
      return false;
   }</script><form onsubmit="return toSubmit();" >

演示

现在，在做大型项目时，这可能不是个好主意。您可能需要使用事件侦听器。

请阅读更多关于内联事件与事件侦听器(addEventListener和IE的attachEvent)这里..因为我无法解释克里斯·贝克做。

这两种方法都是正确的，但它们中没有一种本身是“最佳”的，开发人员选择使用这两种方法可能是有原因的。

Answer 3

将事件侦听器附加到窗体.addEventListener()然后调用.preventDefault()方法上event:

const element = document.querySelector('form');

element.addEventListener('submit', event => {

  event.preventDefault();

  // actual logic, e.g. validate the form

  console.log('Form submission cancelled.');

});

<form>

  <button type="submit">Submit</button>

</form>

我认为这比定义一个submit事件处理程序与onsubmit属性，因为它将网页逻辑和结构分离。维护逻辑与HTML分离的项目要容易得多。见：低调的JavaScript.

使用.onsubmit的属性formDOM对象不是一个好主意，因为它阻止您将多个提交回调附加到一个元素。看见addEventListener与onClick.