HTML | DOM onsubmit 事件(1)

📌 相关文章

📜 HTML | DOM onsubmit 事件(1)

📅 最后修改于: 2023-12-03 15:31:12.439000 🧑 作者: Mango

HTML | DOM onsubmit 事件

在 HTML 表单中，当用户提交表单时会触发 onsubmit 事件。可以使用 JavaScript 来拦截表单的提交，并在提交前验证表单数据或执行其他自定义操作。

语法

document.getElementById("myForm").onsubmit = function() {myFunction()};

或者

<form onsubmit="myFunction()">

参数

无。

返回值

如果 onsubmit 事件处理程序返回 true，则表单将被提交；否则，表单不会被提交。

示例

<!DOCTYPE html>
<html>
<head>
	<title>onsubmit 事件示例</title>
	<meta charset="UTF-8">
</head>
<body>

	<form onsubmit="return validateForm()">
	  <label for="fname">名字:</label>
	  <input type="text" id="fname" name="fname"><br><br>
	  <label for="lname">姓氏:</label>
	  <input type="text" id="lname" name="lname"><br><br>
	  <input type="submit" value="提交">
	</form>

	<script>
		function validateForm() {
		  var x = document.forms["myForm"]["fname"].value;
		  if (x == "") {
		    alert("请填写名字");
		    return false;
		  }
		}
	</script>

</body>
</html>

在上面的示例中，当用户点击 "提交" 按钮时，validateForm() 函数将被调用。如果名字字段为空，则函数将弹出一个警告框并返回 false，以阻止表单提交。

注意事项

只有在 form 标签中使用 onsubmit 事件才能拦截表单提交。
如果在表单中使用多个 submit 按钮，下面的代码片段将为每个按钮添加 onsubmit 事件处理程序：

var x = document.getElementsByTagName("form");
var i;
for (i = 0; i < x.length; i++) {
  x[i].onsubmit = function() {
    alert("表单已提交");
  };
}

以上便是 onsubmit 事件的相关介绍，当您需要为 HTML 表单添加数据验证或执行其他操作时，可以尝试使用 onsubmit 事件来实现。