表单的默认提交

一般，后台程序员与表单打交道的时间是最多的

最近学习Html 表单的提交验证，没想到运行时，都会给我自动提交，这真是难为我了，查了一下，原来是onclick/onsubmit方法的机制问题，我们看似正常传递了函数，用来验证提交是否有问题，如账号或密码是空的验证操作，就不提交表单了。

具体看一下html代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- 表单配置 -->
<form action="/index/" method="post" οnsubmit="submitTest();">
<input value="请输入账户">
<input type="submit" value="登录">
</form>
<!-- 脚本函数放置位置 -->
<script>
function submitTest() {
// 一些逻辑判断
return false;
}
</script>

默认自动提交表单

1
2
<form action="/index/" method="post" οnsubmit="submitTest();">

该代码仅仅是调用了该函数，而不是获取函数的返回值，这是非常非常要注意的一点
相当于，只是获取函数的对象，但不是获取函数的返回值。

1
2
3
4
5
6
οnsubmit=submitTest=submitTest(){
submitTest()
}
# 调用函数
onsubmit()

不默认，先表单验证，后决定是否提交

1
2
<form action="index.jsp" method="post" οnsubmit="return submitTest();">

分析

1
2
οnsubmit="return submitTest();"

相当于是 onsubmit=return false; 执行了 return false; 语句

表单的标签的提交，有true和false两个验证参数，当表单获取了true参数，那么就会提交，而且默认的情况下，表单是return true，也就是自动提交表单，当获取了false，那么表单就不会提交，而这个获取true或false参数的接口，就是onclick和onsubmit这两个参数，不过这两个参数，有一个先后执行顺序的要点。

理解 onclick 和 onsubmit 参数的先后顺序

要注意，onclick参数，要比 onsubmit参数，要先执行，因为按钮事件肯定比提交表单，要更快些，而且每一个表单，里面如果存在了 type="submit" 的参数，那么就会被定性为触发表单提交的事件，这个无论是input标签，还是button标签，只要有这个参数在，那么都是可以定为表单触发器。
因此，选用 onclick 其实会比 onsubmit 更快验证

补充：

1. 一般而言， type="submit"其实是可以有多个的，只要某个标签，如input或button标签触发了，那么就可以提交表单了；

2. return true; 或 return false; 看来是JavaScript操作。

参考链接

表单提交 οnsubmit=“return false”

form表单的onsubmit() return问题

【php】form表单中的onsubmit与return false

html return作用,js中return；、return true、return false;区别

html静态绑定js 里return是怎么回事怎么用的

最后

以上就是欢呼书本最近收集整理的关于如何阻止表单的自动提交 - onclick - onsubmit - return true / false；表单的默认提交理解 onclick 和 onsubmit 参数的先后顺序补充：参考链接的全部内容，更多相关如何阻止表单的自动提交内容请搜索靠谱客的其他文章。