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.填寫名字
代碼分析
當(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的作用詳解的詳細內(nèi)容，更多關(guān)于JS表單提交onsubmit事件return的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了使用javascript實現(xiàn)類似超鏈接的效果的特效，通過示例熟悉javascript事件，這里推薦給大家。2014-12-12
下面小編就為大家?guī)硪黄猨s替換字符串中所有指定的字符(實現(xiàn)代碼)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
javascript實現(xiàn)動態(tài)表頭及表列的展現(xiàn)方法
這篇文章主要介紹了javascript實現(xiàn)動態(tài)表頭及表列的展現(xiàn)方法,涉及javascript動態(tài)操作table元素的實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
對表格的行和列都能加亮顯示，而且點擊單元格后會有更不同的表現(xiàn)...2008-12-12
解決js數(shù)據(jù)包含加號+通過ajax傳到后臺時出現(xiàn)連接錯誤
測試過程中發(fā)現(xiàn)js數(shù)據(jù)包含加號+通過ajax傳到后臺時出現(xiàn)連接錯誤,刪除+，鏈接暢通了，果然是這塊問題，對加號進行轉(zhuǎn)義2013-08-08
用javascript實現(xiàn)gb2312轉(zhuǎn)utf-8的腳本
用javascript實現(xiàn)gb2312轉(zhuǎn)utf-8的腳本...2007-05-05
web-view是小程序提供的一個可以直連h5頁面的組件,只要傳遞一個h5頁面的地址,就可以在小程序里直接打開預(yù)覽該h5頁面,這篇文章主要給大家介紹了微信小程序webView嵌入H5的相關(guān)資料,需要的朋友可以參考下2021-07-07
今天正好需要用到iframe 與主框架相互訪問的實現(xiàn)方法，正好看到了這篇文章，確實不錯，特分享一下,需要的朋友可以參考下2017-09-09
利用Bootstrap實現(xiàn)表格復(fù)選框checkbox全選
Bootstrap相信應(yīng)該不用多介紹，來自 Twitter，是目前最受歡迎的前端框架。這篇文章主要給大家介紹了如何利用Bootstrap實現(xiàn)表格中的checkbox復(fù)選框全選效果，文中給出詳細的介紹及完整的實例代碼，相信對大家的理解和學(xué)習(xí)具有一定的參考借鑒價值，下面來一起看看吧。2016-12-12
這篇文章主要介紹了el-select加上搜索查詢時,限制開頭空格輸入的解決方案,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-02-02