关于Onsubmit方法返回false表单仍然被提交的原因

470 阅读1分钟

工作以后回过头来看博客才发现,当年懵懂无知时写下的这篇博文坑了不少人,其实我这里的问题就是:

onsubmit="initadd()"//少了一个return,应改为onsubmit="return initadd()";

导致不管怎样都可以提交,还有一个细节就是我标签是用的name属性,js取值用的getElementById,所以导致取不到值,引发的一系列问题。

本来准备删了这篇文章的,不过觉得记录一下自己的无知也是挺好的。

以下为原文: ————————————————————————————————————————————————————————

今天在做项目的时候偶然发现一个很奇怪的现象,下面这段HTML代码看起来很正常,没有任何问题(除了用于示例的页面没排,所以很丑):

<html>
<head>
<script type="text/javascript">
	function initadd() {
		var name = document.getElementById("name");
		if (name.value.length < 2) {
			alert("请输入正确的用户名");
			return false;
		}
		return true;
	}
</script>
</head>

<body>
	<form action="test.jsp" onsubmit="initadd()">
		添加用户:<input type="text" name="name"> 
		<input type="submit" value="提交">
	</form>
</body>
</html>

运行后的页面:

这里写图片描述

我没有输入任何内容,点击提交按钮,此时弹出提示框,一切看起来很正常:

这里写图片描述

但是此时奇迹发生了,页面竟然提交了:

这里写图片描述

纠结了很久,终于找到了原因:onsubmit 这个方法是在提交表单时产生的,也就是先提交表单后调用方法,有点类似do while的味道。

在网上看到了类似结论,把按钮换成button类型的,再使用onclick()就好了: 改用代码:

<html>
<head>
<script type="text/javascript">
	function initadd() {
		var name = document.getElementById("name");

		if (name.value.length < 2) {
			alert("请输入正确的用户名");
			return;
		}
		var userForm = document.getElementById("userForm");
		userForm.action = "test.jsp";
		userForm.submit();
	}
</script>
</head>

<body>
	<form name="userForm">
		添加用户:<input type="text" name="name"> <input type="button"
			value="提交" onclick="initadd()">
	</form>
</body>
</html>

这样确实就没问题了。

不过其实当我们的表单项一旦大于一项的时候,onsubmit验证不通过就不会提交了:

<html>
<head>
<script type="text/javascript">
	function initadd() {
		var name = document.getElementById("name");
		var sex = document.getElementById("sex");


		if (name.value.length < 2) {
			alert("请输入正确的用户名");
			return false;
		}
		if (sex.value.length == 0) {
			alert("请输入正确的性别");
			return false;
		}
		return true;
	}
</script>
</head>

<body>
	<form action="test.jsp" onsubmit="return initadd()">
		添加用户:<input type="text" name="name"> 
		用户性别:<input type="password" name="sex"> 
		<input type="submit" value="提交">
	</form>
</body>
</html>

此时不输入内容,表单就不会提交了。

以上,记录学习。