如何防止HTMLFormElement.submit()调用表单提交[重复]。
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何防止HTMLFormElement.submit()调用表单提交[重复]。相关的知识，希望对你有一定的参考价值。
我发现，当试图阻止表单提交时，我想我可以使用 event.preventDefault() 经常 onsubmit 事件监听器。
这个方法确实适用于通过点击表单输入中的回车键或按下表单的提交按钮来提交表单的情况。
我发现它是 不 当表单被触发时，用 htmlFormElement.submit()当我在浏览器中做一些测试，看看如何利用它的时候，我惊讶地看到这个提交方法不会触发事件，有效地允许客户端中的人绕过任何表单验证，无论是通过HTML还是JS。
我很惊讶地看到，这种提交方法不会触发事件，有效地允许客户端中的人绕过任何表单验证，无论是通过HTML还是JS施加的。
如何防止表单提交时被触发的 HTMLFormElement.submit() ?
这里有一个例子(编码笔):
<script>
var $form = document.getElementById("my-form");
var $input = document.getElementById("restricted-input");
var $notice = document.getElementById("notice");
var $submitForm = document.getElementById("submit-form");
var $requestSubmitForm = document.getElementById("request-submit-form");
var $resetForm = document.getElementById("reset-form");
$form.addEventListener("submit", function (event)
event.preventDefault();
$notice.innerHTML = "Submitted: " + $input.value;
);
$submitForm.addEventListener("click", function (event)
event.preventDefault();
$notice.innerHTML = "";
$form.submit();
);
$requestSubmitForm.addEventListener("click", function (event)
event.preventDefault();
$notice.innerHTML = "";
$form.requestSubmit();
);
$resetForm.addEventListener("click", function (event)
event.preventDefault();
$notice.innerHTML = "";
$form.reset();
);
</script>
<form id="my-form" action="/" method="post">
<input id="restricted-input" type="text" pattern="^[a-z]+$" required />
<button type="submit">Submit</button>
</form>
<p id="notice"></p>
<p>
<a id="submit-form" href="javascript:void 0">form.submit()</a><br/>
<a id="request-submit-form" href="javascript:void 0">form.requestSubmit()</a><br/>
<a id="reset-form" href="javascript:void 0">Reset form</a>
</p>
编辑：请在回答问题前阅读全文。提到jQuery的答案。onsubmit 或 event.preventDefault() 作为决议的一部分将被下架。
与其他答案不同，返回false只是答案的一部分。考虑一下在返回语句之前发生JS错误的情况......
HTML。
<form onsubmit="return mySubmitFunction(event)">
...
</form>
脚本：
function mySubmitFunction()
return false;
在这里返回false不会被执行，无论如何表单都会被提交。你还应该调用preventDefault来防止Ajax表单提交的默认表单动作。
可以使用try...catch块。调用 preventDefault
function mySubmit(e)
e.preventDefault();
try
someBug();
catch (e)
throw new Error(e.message);
return false;
防止表单提交的最简单解决方案是在HTML元素中使用onsubmit属性定义的提交事件处理程序上返回false。
<!doctype html>
<html lang="en">
<body>
<form onsubmit="return false;">
<p>Choose your preferred contact method:</p>
<div>
<input type="radio" id="email" name="contact" value="email">
<label for="email">Email</label>
<input type="radio" id="phone" name="contact" value="phone">
<label for="phone">Phone</label>
</div>
<div>
<button id="submit" type="submit">Submit</button>
</div>
</form>
</body>
</html>以上是关于如何防止HTMLFormElement.submit()调用表单提交[重复]。的主要内容，如果未能解决你的问题，请参考以下文章