如何防止表单被提交？

Question

我有一个表单，其中某处有一个提交按钮。

但是，我想以某种方式“捕捉”提交事件并防止它发生。

有什么办法可以做到这一点吗？

我无法修改提交按钮，因为它是自定义控件的一部分。

原文由 Nathan Osman 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

与其他答案不同，return false 只是答案的 _一部分_。考虑在 return 语句之前发生 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;
 }

原文由 Ben Rowe 发布，翻译遵循 CC BY-SA 4.0 许可协议

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）的 更多信息。因为我无法比 Chris Baker 更能解释它。

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

原文由 Reigel Gallarde 发布，翻译遵循 CC BY-SA 4.0 许可协议