JavaScript阻止表單提交方法（附代碼）
<body> <form action="clock.html" method="post" onsubmit="return checkLength()"> <p>name:<input type="text" name="user" id="user"></p> <input type="submit" id="submit" name="submit"> </form> </body> </html>
html頁(yè)面。
第一種方法：利用event的阻止默認(rèn)事件機(jī)制，頁(yè)面載入之后獲得submit元素，然后為submit注冊(cè)click響應(yīng)函數(shù)，參數(shù)為event事件。
在用戶點(diǎn)擊submit觸發(fā)響應(yīng)函數(shù)后，直接event.preventDefault();阻止表單轉(zhuǎn)跳的默認(rèn)事件。
第二種方法：在表單form標(biāo)簽下屬性onsubmit="return checkLength()" 或 id="submit"的input標(biāo)簽下添加屬性 checkLength()"
function 函數(shù)中 阻止 form提交 return false;
阻止 函數(shù)中代碼向下執(zhí)行 return;
以下還有
1.form的兩個(gè)事件
submit，提交表單，如果直接調(diào)用該函數(shù)，則直接提交表單
onSubmit，提交按鈕點(diǎn)擊時(shí)先觸發(fā)，然后觸發(fā)submit事件。如果不加控制的話，默認(rèn)返回true，因此表單總能提交。
2. JS的校驗(yàn)
通過(guò)在JS中用document.myform.name.value,來(lái)得到用戶的每一個(gè)輸入 ，進(jìn)行校驗(yàn)，當(dāng)完全通過(guò)時(shí)，返回TRUE，反之返回false。
3. 頁(yè)面代碼實(shí)現(xiàn)
/* <form name="testform" action="hello.html" method="post" onSubmit="return check();"> <input type="text" name="name"> <input type="submit" value="提交"> </form> */
4. JS的實(shí)現(xiàn)
function check(){
if (document.testform.name.value=="admin") {
alert("姓名不正確");
return false;
}
else{
return true;
}
}
注意
onSubmit的寫(xiě)法，千萬(wàn)不要寫(xiě)成：“check（）”，這樣當(dāng)檢驗(yàn)不能通過(guò)的時(shí)候不會(huì)提交表單。
好了以上就是小編為大家整理的js阻止表單提交的全部?jī)?nèi)容啦，希望對(duì)大家的學(xué)習(xí)能夠有所幫助~
相關(guān)文章
uniapp如何使用 web-view 與網(wǎng)頁(yè)互相通信
這篇文章主要介紹了uniapp如何使用 web-view 與網(wǎng)頁(yè)互相通信,在APP中使用 this.$scope.$getAppWebview() 獲取webview對(duì)象實(shí)例,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-07-07
很多時(shí)候?yàn)榱孙@示格式，需要在某一字符串不滿位的情況下進(jìn)行前補(bǔ)0操作。下面這篇文章就給大家主要介紹了javascript添加前置0(補(bǔ)零)的幾種方法,文中給出了詳細(xì)的示例代碼，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-01-01
這篇文章主要介紹了js文本框跑馬燈效果，功能實(shí)現(xiàn)非常簡(jiǎn)單，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
這篇文章主要介紹了ES6中Symbol、Set和Map用法,結(jié)合實(shí)例形式詳細(xì)分析了ES6中Symbol、Set和Map的功能、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-08-08
在子窗口中關(guān)閉父窗口在某些特殊的情況下還是有存在的必要的，其實(shí)很簡(jiǎn)單，只需一句代碼便可實(shí)現(xiàn)，感興趣的朋友可以了解下2013-10-10
淺談JavaScript中的String對(duì)象常用方法
這篇文章主要介紹了JavaScript中的String對(duì)象常用方法,非常簡(jiǎn)單實(shí)用，有需要的小伙伴參考下2015-02-02
JQuery+DIV自定義滾動(dòng)條樣式的具體實(shí)現(xiàn)
用DIV和DIV自身的滾動(dòng)條相互控制內(nèi)容的滾動(dòng)，DIV自身的滾動(dòng)條樣式可以用DIV層覆蓋，重寫(xiě)滾動(dòng)條樣式2013-06-06
javascript實(shí)現(xiàn)小型區(qū)塊鏈功能
這篇文章主要介紹了javascript實(shí)現(xiàn)小型區(qū)塊鏈功能，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
微信小程序?qū)崿F(xiàn)圖片滾動(dòng)效果示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)圖片滾動(dòng)效果,結(jié)合實(shí)例形式分析了微信小程序基于swiper組件的圖片滾動(dòng)效果相關(guān)實(shí)現(xiàn)技巧與操作注意事項(xiàng),需要的朋友可以參考下2018-12-12
chart.js實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁(yè)顯示拆線圖的效果
本文主要介紹了chart.js實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁(yè)顯示拆線圖的效果,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-11-11