如何阻止表单的自动提交 - onclick - onsubmit - return truefalse;

如何阻止表单的自动提交 - onclick - onsubmit - return truefalse;,第1张

目录 表单的默认提交理解 onclick 和 onsubmit 参数的先后顺序补充:参考链接

表单的默认提交

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

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

具体看一下html代码:


<form action="/index/" method="post" οnsubmit="submitTest();">
        <input value="请输入账户">     
        <input type="submit" value="登录">

form>


<script>
    function submitTest() {
        // 一些逻辑判断
     return false;
    }
script>

默认自动提交表单

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

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

οnsubmit=submitTest=submitTest(){
			submitTest()
		}
# 调用函数
onsubmit()

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

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

分析

οnsubmit="return submitTest();"

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

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

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

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

补充:

一般而言, type="submit"其实是可以有多个的,只要某个标签,如inputbutton标签触发了,那么就可以提交表单了;

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是怎么回事怎么用的

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/941055.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-17
下一篇 2022-05-17

发表评论

登录后才能评论

评论列表(0条)

保存