在前端页面中，表单是用户最常用的交互方式之一。而有些时候，我们需要防止用户重复或误提交表单数据，以避免不必要的麻烦。本文将介绍几种防止表单提交的方法，并提供相应的示例代码和实现原理。
1. 禁用提交按钮
禁用提交按钮是最简单的防止表单提交的方法之一。通过在表单提交前先禁用提交按钮，可以避免用户多次点击提交按钮而导致的重复提交。
-- -------------------- ---- -------
------
---- ---- ---
------- ------------- ---------------------------
-------
--------
----- --------- - --------------------------------------
----------------------------------- -- -- -
------------------ - ----- -- ------
---
---------上面的代码中，我们给提交按钮设置了一个 click 事件监听器，当用户点击提交按钮时，会将该按钮禁用。
需要注意的是，禁用提交按钮只能防止用户在提交成功后再次提交表单，但不能防止用户未完成表单输入就提交的情况。
2. 阻止默认提交行为
除了禁用提交按钮，我们还可以通过阻止默认提交行为来防止表单提交。在表单提交前，我们可以使用 preventDefault 方法来取消表单默认的提交行为，然后自己编写提交逻辑进行处理。
-- -------------------- ---- -------
----- -------------
---- ---- ---
------- ------------- ---------------------------
-------
--------
----- ------ - -----------------------------------
--------------------------------- ------- -- -
----------------------- -- --------
-- --------
---
---------在上面的代码中，我们给表单添加了一个 submit 事件监听器，并在该监听器中调用了 preventDefault 方法。这样，当用户点击提交按钮时，表单就不会自动提交了。在监听器中，可以编写相应的逻辑来处理表单提交。
需要注意的是，阻止默认提交行为并不会禁用提交按钮，所以仍然需要将提交按钮禁用来防止用户多次点击提交按钮。
3. CSRF Token
CSRF（Cross-Site Request Forgery）攻击是一种利用 Web 应用程序漏洞实现的攻击方式，攻击者通过伪造用户请求来执行某些恶意操作。为了防止 CSRF 攻击，我们可以在表单中添加 CSRF Token。
<form>
<!-- 表单元素 -->
<input type="hidden" name="_csrf" value="{{ csrfToken }}">
<button type="submit">提交</button>
</form>在上面的代码中，我们在表单中添加了一个隐藏域，用于存储 CSRF Token。在服务器端验证表单提交时，可以先检查提交的 CSRF Token 是否正确，以此来判断表单是否合法。
需要注意的是，CSRF Token 只能防止 CSRF 攻击，并不能完全防止表单重复或误提交，因此仍需结合其他方法一起使用。
结语
本文介绍了几种前端防止表单提交的方法，包括禁用提交按钮、阻止默认提交行为和添加 CSRF Token。这些方法都有自己的优缺点，需要根据实际情况选择使用。在实际开发中，我们可以根据业务需求来结合使用这些方法，以保证表单数据的安全性和可靠性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/9568
