Javascript 如何在被HTMLFormElement.submit（）调用时防止表单提交

我发现，在尝试阻止表单提交时，我认为可以通过常规的

onsubmit

事件侦听器使用

event.preventDefault（）

当表单提交时，此方法可以通过在表单输入中按Enter键或按表单的submit按钮来执行

当我在浏览器中进行一些测试以查看如何利用它时，我发现当表单被触发时，它并没有被阻止

我惊讶地发现，这个submit方法不会触发事件，有效地允许客户机中的某个人绕过任何表单验证，不管是通过HTML还是JS进行的

当由

HTMLFormElement.submit（）

触发时，如何防止表单提交

下面是一个例子（）：

var$form=document.getElementById（“我的表单”）；
var$input=document.getElementById（“受限输入”）；
var$notice=document.getElementById（“通知”）；
var$submitForm=document.getElementById（“提交表单”）；
var$requestSubmitForm=document.getElementById（“请求提交表单”）；
var$resetForm=document.getElementById（“重置表单”）；
$form.addEventListener（“提交”），函数（事件）{
event.preventDefault（）；
$notice.innerHTML=“已提交：”+$input.value；
});
$submitForm.addEventListener（“单击”），函数（事件）{
event.preventDefault（）；
$notice.innerHTML=“”；
$form.submit（）；
});
$requestSubmitForm.addEventListener（“单击”），函数（事件）{
event.preventDefault（）；
$notice.innerHTML=“”；
$form.requestSubmit（）；
});
$resetForm.addEventListener（“单击”），函数（事件）{
event.preventDefault（）；
$notice.innerHTML=“”；
$form.reset（）；
});
提交

---

编辑：请在回答之前完整阅读问题。将jQuery、

onsubmit

或

event.preventDefault（）

作为解决方案的一部分的答案将被否决。

防止表单提交的最简单解决方案是在使用HTML元素中的onsubmit属性定义的提交事件处理程序时返回false

选择您首选的联系方式：

电子邮件
电话
提交

与其他答案不同，return false只是答案的一部分。考虑在返回语句之前发生JS错误的场景…

HTML:

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

function mySubmitFunction()
{
  return false;
}

此处返回false将不会执行，并且表单将以任何方式提交。您还应该调用preventDefault来防止Ajax表单提交的默认表单操作

可以使用try…catch块。 调用默认值

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

---

如果显式调用表单的submit方法，则无法阻止调用后的提交（

e.preventDefault

在提交处理程序中不起任何作用）。尝试使用jQuery，会更容易。在这里你可以看到一个例子：是的，就是这样，在JS中触发表单提交时，提交侦听器甚至没有被调用。@MattScheurich请不要浪费太多的时间。当海报甚至不需要您的页面时，总是可以在不经过浏览器验证的情况下发布表单（或者AJAX调用），或者在不需要服务器验证的情况下发布表单。确保在服务器端也进行了适当的验证，这是唯一安全的方法。@flamubeqiraj验证AJAX调用很容易绕过。只需发送一次，然后从“网络”选项卡上拿起电话，并使用“编辑并重新发送”工具。如果由JS执行，则从内联提交侦听器返回

false

，并不会阻止提交。@Abdi2fa感谢您的回答，但我不确定您是否仔细阅读了该问题。我已经说过，当有人通过JS

submit（）

函数触发表单提交时，使用

onsubmit

不起作用。我再次感谢您提供答案的毅力和意愿，但您建议的解决方案并不合适。它忽略了一个事实，即在我的问题中，我声明我不能在submit上使用

。我仍然可以使用
document.querySelector（“form[onsubmit='return mySubmitFunction（event）'）”）提交表单。submit（）
，它会忽略
onsubmit
事件侦听器。