在前端开发中，表单提交是一个非常常见的交互方式。当用户填写完表单并点击提交按钮时，通常会将表单数据发送到服务器进行处理。然而，有时我们需要在表单提交之前执行一些操作，例如验证表单数据、格式化数据等。这时候，我们就需要通过 JavaScript 来捕获表单提交事件。
监听表单提交事件
要监听表单提交事件，我们可以使用原生的 addEventListener 方法或者 jQuery 的 on 方法。在这里，我们使用原生方法来演示：
-- -------------------- ---- -------
----- ---- - -------------------------------
------------------------------- --------------- -
-- ------
-----------------------
-- ------
----- -------- - --- ---------------
-- ----
------------------------- -
------- -------
----- --------
---------------- -- -
-------------------- ----------
-------------- -- -
---------------------- -------
---
---在上面的代码中，我们首先获取了一个表单元素，并给它添加了一个 submit 事件监听器。当表单提交事件触发时，我们阻止了表单默认的提交行为，并获取了表单数据，最后通过 fetch 方法发送请求。
表单验证
在实际的项目中，我们通常需要对表单数据进行验证。表单验证可以分为客户端验证和服务器端验证，客户端验证主要是为了提高用户体验和减轻服务器负担，而服务器端验证则是必须的，因为客户端验证可以被绕过。
客户端验证
客户端验证可以通过 HTML5 中的表单验证属性来实现，例如 required、minlength、maxlength、pattern 等。我们也可以通过 JavaScript 来手动验证表单数据。下面是一个简单的表单验证示例：
-- -------------------- ---- -------
----- ---- - -------------------------------
------------------------------- --------------- -
-- ------
-----------------------
-- ------
----- -------- - --- ---------------
-- ------
----- ---- - ---------------------
-- ------- -
----------------
-------
-
----- ----- - ----------------------
-- -------- -
------------------
-------
-
----- -------- - -------------------------
-- ----------- -
----------------
-------
-
-- ----
------------------------- -
------- -------
----- --------
---------------- -- -
-------------------- ----------
-------------- -- -
---------------------- -------
---
---在上面的代码中，我们手动验证了表单中的姓名、邮箱地址和密码是否为空，如果有任何一项为空，则提示用户输入相应内容，并返回。如果所有表单项都有值，则发送请求。
服务器端验证
服务器端验证是必须的，因为客户端验证可以被绕过。在提交表单数据到服务器之前，我们应该对表单数据进行验证，并返回相应的错误信息。
-- -------------------- ---- -------
----- ---- - -------------------------------
------------------------------- --------------- -
-- ------
-----------------------
-- ------
----- -------- - --- ---------------
-- ------
--------------------------- -
------- -------
----- --------
---------------- -- ----------------
---------- -- -
-- ------------- -
------------------------------
-------
-
-- ----
------------------------- -
------- -------
----- --------
---------------- -- -
-------------------- ----------
-------------- -- -
---------------------- -------
---
-------------- -- -
-------------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------