在Web开发中，表单是不可避免的一部分。当用户填写并提交表单时，我们通常需要在JavaScript中对其进行处理。本文将介绍如何监听表单提交事件，并提供示例代码。
监听表单提交事件
在JavaScript中，我们可以使用addEventListener()方法来监听表单提交事件。此方法接受两个参数：事件类型和回调函数。当指定的事件被触发时，回调函数将被执行。
const form = document.querySelector('form');
form.addEventListener('submit', (event) => {
event.preventDefault(); // 阻止表单默认提交行为
// 在这里编写表单提交后的逻辑
});上述代码中，我们首先使用querySelector()方法获取表单元素。然后，我们使用addEventListener()方法监听submit事件，并在回调函数中编写表单提交后的逻辑。注意，在回调函数中我们调用了preventDefault()方法来阻止表单默认的提交行为。
表单验证示例
下面是一个简单的表单验证示例。该示例要求用户必须输入姓名和电子邮件地址才能提交表单。如果用户未填写必填字段，则会显示错误消息。
-- -------------------- ---- ------- ------ ------ ---------------------- ------ ----------- --------- ----------- --------- ------ --------------------------- ------ ------------ ---------- ------------ --------- ------- ------------------------- ------- ---- ---------------------
-- -------------------- ---- -------
----- ---- - -------------------------------
----- -------- - -------------------------------------
------------------------------- ------- -- -
-----------------------
----- --------- - --------------------------------
----- ---------- - ---------------------------------
-- ----------
-- ----------------- -- ------------------ -
------------------ - ----------
-------
-
-- -------------
---在上述代码中，我们首先获取表单元素和错误消息容器。然后，在submit事件的回调函数中，我们获取了姓名和电子邮件地址输入框的值，并进行了简单的验证。如果用户未填写必填字段，则我们会显示错误消息，否则将继续执行表单提交后的逻辑。
总结
本文介绍了如何在JavaScript中监听表单提交事件，并提供了一个简单的表单验证示例。在实际开发中，表单处理是非常常见的需求，希望本文能对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12083
