您的位置：首页 > 其它

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

2017-12-18 10:24 459 查看
今天在做项目的时候偶然发现一个很奇怪的现象，下面这段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>


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

以上，记录学习。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航