[#0x0053] 阻止 form submit 的方法

最新推荐文章于 2025-05-10 08:55:47 发布

最新推荐文章于 2025-05-10 08:55:47 发布 · 253 阅读

文章标签：

#HTML #form #submit

HTML 专栏收录该内容

1 篇文章

订阅专栏

本文深入探讨了如何在HTML表单中自定义提交逻辑和验证过程，通过使用`<form onsubmit=...>`和`<input type=submit onclick=...>`元素实现表单提交前的复杂验证和控制，确保数据的有效性和安全性。通过实例展示了如何在表单提交前执行校验函数，以及如何针对不同操作（如撤销）编写特定的逻辑，确保用户交互的高效性和用户体验。

有两个地方可以可以阻止form submit，一是<form onsubmit="">，而是<form>下的<input type="submit" onclick="">，只要这两个函数有一个是return false;，那么点击这个button并不会submit form。

具体的执行流程是这样的：

if (submitInput.onclick() == false) {
	// 不触发 form.onsubmit();
	// form 不提交;
} else {
	// 触发 form.onsubmit();
	if (form.onsubmit() == false) {
		// form 不提交
	} else {
		// 提交 form
	}
}

所以在这个两个函数里面可以加一些验证工作，同时，可以根据验证结果来判断是否提交form。

比如有：

var checkForm = function() {
	// 获取输入
	if (校验失败)
		return false；
	else
		return true；
}

然后把这个函数写到onsubmit或是onclick，也可以针对不同的button写不同的逻辑的校验函数，比如这样：

<html>
	<form onsubmit="return checkFormStep2();" method="post" action="/XXX.do">
		<input type="text" id="username">
		<input type="password" id="password">

		<input type="submit" onclick="return checkFormStep1();" value="go" />
	</form>
</html>

在点击时先执行checkFormStep1()，在form提交前再执行checkFormStep2()，两个都通过都return true了才提交

也可以针对“撤销”功能的按钮写一些类似清空输入的功能，再禁止它提交form，比如这样：

<html>
	<form method="post" action="/XXX.do">
		<input type="text" id="username">
		<input type="password" id="password">

		<input type="submit" onclick="return checkFormStep();" value="go" />
		<input type="submit" onclick="clearInput(); return false;" value="reset" />
	</form>
</html>