JS表單提交中onsubmit事件return的作用詳解
更新時間：2023年10月08日 10:13:42 作者：Winn
這篇文章主要為大家介紹了JS表單提交中onsubmit事件return的作用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
JS表單提交中onsubmit事件return的作用
1.html
<!DOCTYPE?html>
<html>
<head>
<title>JS表單提交中onsubmit事件return的作用</title>
</head>
<body>
<form method="post"?action="2.html"?onsubmit="return?Checkname()">
<input?id="name"?type="text"?placeholder="請輸入你的名字">
<button>提交</button>
</form>
</body>
</html>
<script?type="text/javascript">
????function?Checkname()?{
????????var?name=document.getElementById('name').value;
????????if?(!name)?{
????????????alert('名字為空');
????????????return?false;
????????}else{
????????????return?true;
????????}
????}
</script>2.html
<!DOCTYPE?html> <html> <head> <title>JS表單提交中onsubmit事件return的作用</title> </head> <body> ????恭喜表單提交成功 </body> </html>
代碼運行效果圖
1.不填寫名字
2.填寫名字
代碼分析
當點擊提交按鈕（button按鈕）的時候，瀏覽器會自動觸發(fā)onsubmit事件，執(zhí)行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頁面。
以上就是JS表單提交中onsubmit事件return的作用詳解的詳細內容，更多關于JS表單提交onsubmit事件return的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了javascript實現自動填寫表單的方法,以一個簡單實例形式分析了JavaScript結合瀏覽器設置實現自動保存表單的相關技巧,需要的朋友可以參考下2015-12-12
這篇文章主要給大家介紹了PHP中pathinfo()函數導致的安全問題,文中給出了詳細的介紹與示例代碼，相信對大家的理解和學習具有一定的參考借鑒價值，需要的朋友可以參考下，下面來一起看看吧。2017-01-01
這篇文章主要介紹了JS變量提升及函數提升實例解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-09-09
本文主要介紹了javascript構造函數以及原型對象的理解。分享了有關它們的實例代碼，具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要介紹了微信小程序實現商品數據聯動效果，代碼很簡單，直接復制即可根據自己的需求去修改，對小程序商品數據聯動實例代碼感興趣的朋友一起看看吧2022-08-08
網頁加載時頁面顯示進度條（加載完成時顯示網頁內容）,這種效果在瀏覽網頁很常見，本文也介紹一種實現方法，需要了解的朋友可以參考下2012-12-12
這篇文章主要介紹了canvas軌跡回放功能實現過程以及相關的代碼整理，跟著小編一起學習下吧。2017-12-12
本篇文章是對在JS中Map和List的簡單實現代碼進行了詳細的分析介紹，需要的朋友參考下2013-07-07
這篇文章主要介紹了webpack4.x打包過程詳解，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要為大家詳細介紹了JavaScript實現可拖動模態(tài)框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10