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

时间 2020-01-22

标签表单提交 onsubmit 事件 return 栏目 JavaScript 繁體版

原文原文链接

完整代码以下：

1.htmljavascript

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.htmlhtml

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

代码运行效果图以下：

1.不填写名字
java

2.填写名字
浏览器

代码分析：

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

当Checkname()返回false的时候，onsubmit事件能够当作为：post

onsubmit="return false"

当Checkname()返回true的时候，onsubmit事件能够当作为：spa

onsubmit="return true"

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