在前端开发中，我们经常需要在表单中使用提交按钮来触发表单的提交操作。但是，如何确定提交按钮确实被按下并且表单数据有效呢？这就需要用到表单事件 onsubmit。
什么是 onsubmit？
onsubmit 是一个表单事件属性，当表单提交时触发该事件。可以通过 JavaScript 在表单元素上设置 onsubmit 属性来绑定提交事件处理程序。
如何使用 onsubmit？
首先，在 HTML 表单元素中设置 onsubmit 属性：
<form onsubmit="return validateForm()"> <input type="text" name="username"> <input type="submit" value="提交"> </form>
在这个例子中，我们定义了一个名为 validateForm() 的函数来验证表单数据，并在 onsubmit 事件处理程序中调用该函数。如果 validateForm() 返回 true，则表单将被提交；如果返回 false，则表单不会被提交。
function validateForm() {
// 验证代码...
return isValid;
}在 validateForm() 函数中，你可以编写你自己的表单验证逻辑，例如检查必填字段、格式验证等。
示例代码
下面是一个完整的示例代码，演示了如何在表单中使用 onsubmit 事件来确定提交按钮是否被按下，并验证表单数据是否有效：
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- ----------------
---------------------
-------
------
----- ---------------- ----------------
------ ---------------------------
------ ----------- ------------- --------------- ---------
------ --------------------------
------ --------------- ------------- --------------- ---------
------ ------------- -----------
-------
--------
-------- -------------- -
--- -------- - ------------------------------------------
--- -------- - ------------------------------------------
-- --------------
-- --------- --- -- -- -------- --- --- -
-------------------
------ ------
-
-- -------------
-- ----
------ -----
-
---------
-------
-------在这个例子中，我们使用了 HTML5 的 required 属性来标记必填字段，并在 validateForm() 函数中检查这些字段是否都填写了。如果有任何一个字段未填写，则会弹出提示框并阻止表单提交。
总结
在前端开发中，表单是一个非常重要的组件。了解如何使用 onsubmit 事件可以帮助我们确定提交按钮是否被按下，并实现表单数据的有效性验证。希望本文对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12136