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