完整代码如下：
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.不填写名字
image
2.填写名字
image
代码分析：
当点击提交按钮（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页面。
网友评论