JS表單提交中onsubmit事件return的作用詳解
更新時間：2023年10月08日 10:13:42 作者：Winn
這篇文章主要為大家介紹了JS表單提交中onsubmit事件return的作用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
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.填寫名字
代碼分析
當(dāng)點擊提交按鈕（button按鈕）的時候，瀏覽器會自動觸發(fā)onsubmit事件，執(zhí)行Checkname()函數(shù)。Checkname()函數(shù)通過判斷名字是否存在，來返回true或者false。
當(dāng)Checkname()返回false的時候，onsubmit事件可以看成為：
onsubmit="return?false"
當(dāng)Checkname()返回true的時候，onsubmit事件可以看成為：
onsubmit="return?true"
重點
此時onsubmit中return的作用就是將Checkname()函數(shù)運行返回的結(jié)果（true或者false），再向上返回（返回給瀏覽器）。瀏覽器如果接收到onsubmit返回的是false，則阻止表單提交。反之，如果接收到的是true，表單就會提交到action屬性指向的2.html頁面。
以上就是JS表單提交中onsubmit事件return的作用詳解的詳細(xì)內(nèi)容，更多關(guān)于JS表單提交onsubmit事件return的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了javascript實現(xiàn)自動填寫表單的方法,以一個簡單實例形式分析了JavaScript結(jié)合瀏覽器設(shè)置實現(xiàn)自動保存表單的相關(guān)技巧,需要的朋友可以參考下2015-12-12
詳解PHP中pathinfo()函數(shù)導(dǎo)致的安全問題
這篇文章主要給大家介紹了PHP中pathinfo()函數(shù)導(dǎo)致的安全問題,文中給出了詳細(xì)的介紹與示例代碼，相信對大家的理解和學(xué)習(xí)具有一定的參考借鑒價值，需要的朋友可以參考下，下面來一起看看吧。2017-01-01
這篇文章主要介紹了JS變量提升及函數(shù)提升實例解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-09-09
javascript構(gòu)造函數(shù)以及原型對象的理解
本文主要介紹了javascript構(gòu)造函數(shù)以及原型對象的理解。分享了有關(guān)它們的實例代碼，具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
微信小程序?qū)崿F(xiàn)商品數(shù)據(jù)聯(lián)動效果
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)商品數(shù)據(jù)聯(lián)動效果，代碼很簡單，直接復(fù)制即可根據(jù)自己的需求去修改，對小程序商品數(shù)據(jù)聯(lián)動實例代碼感興趣的朋友一起看看吧2022-08-08
網(wǎng)頁加載時頁面顯示進(jìn)度條加載完成之后顯示網(wǎng)頁內(nèi)容
網(wǎng)頁加載時頁面顯示進(jìn)度條（加載完成時顯示網(wǎng)頁內(nèi)容）,這種效果在瀏覽網(wǎng)頁很常見，本文也介紹一種實現(xiàn)方法，需要了解的朋友可以參考下2012-12-12
這篇文章主要介紹了canvas軌跡回放功能實現(xiàn)過程以及相關(guān)的代碼整理，跟著小編一起學(xué)習(xí)下吧。2017-12-12
本篇文章是對在JS中Map和List的簡單實現(xiàn)代碼進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下2013-07-07
這篇文章主要介紹了webpack4.x打包過程詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)可拖動模態(tài)框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10