继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

JS表单提交中onsubmit事件return的作用

程序员Winn
关注TA
已关注
手记 9
粉丝 12
获赞 55

完整代码如下:

1.html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <title>JS表单提交中onsubmit事件return的作用</title>
 5 </head>
 6 <body>
 7 <form method="post" action="2.html" onsubmit="return Checkname()">
 8     <input id="name" type="text" placeholder="请输入你的名字">
 9     <button>提交</button>
10 </form>
11 </body>
12 </html>
13 
14 <script type="text/javascript">
15     function Checkname() {
16         var name=document.getElementById('name').value;
17         if (!name) {
18             alert('名字为空');
19             return false;
20         }else{
21             return true;
22         }
23     }
24 </script>

2.html

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>JS表单提交中onsubmit事件return的作用</title>
5 </head>
6 <body>
7     恭喜表单提交成功
8 </body>
9 </html>

代码运行效果图如下:

1.不填写名字

图片描述

2.填写名字

图片描述

代码分析:

当点击提交按钮(button按钮)的时候,浏览器会自动触发onsubmit事件,执行Checkname()函数。Checkname()函数通过判断名字是否存在,来返回true或者false。

当Checkname()返回false的时候,onsubmit事件可以看成为:

onsubmit="return false"

当Checkname()返回true的时候,onsubmit事件可以看成为:

onsubmit="return true"

重点:
此时onsubmit中return的作用就是将Checkname()函数运行返回的结果(true或者false),再向上返回(返回给浏览器)。浏览器如果接收到onsubmit返回的是false,则阻止表单提交。反之,如果接收到的是true,表单就会提交到action属性指向的2.html页面。

打开App,阅读手记
2人推荐
发表评论
随时随地看视频慕课网APP

热门评论

出现cannot post的话,把method改成get就可以了

查看全部评论