JavaScript阻止表單提交方法（附代碼）

更新時(shí)間：2017年08月15日 10:06:35 作者：曦羽

這篇文章主要介紹了JavaScript阻止表單提交方法,通過代碼示例講解了阻止表單提交需要注意的事項(xiàng)，以及onSubmit和check（）的區(qū)別寫法,需要的朋友可以參考下

<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頁面。

第一種方法：利用event的阻止默認(rèn)事件機(jī)制，頁面載入之后獲得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)

通過在JS中用document.myform.name.value,來得到用戶的每一個(gè)輸入，進(jìn)行校驗(yàn)，當(dāng)完全通過時(shí)，返回TRUE，反之返回false。

3. 頁面代碼實(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的寫法，千萬不要寫成：“check（）”，這樣當(dāng)檢驗(yàn)不能通過的時(shí)候不會(huì)提交表單。

好了以上就是小編為大家整理的js阻止表單提交的全部內(nèi)容啦，希望對(duì)大家的學(xué)習(xí)能夠有所幫助~

您可能感興趣的文章:

相關(guān)文章

JavaScript通過HTML的class來獲取HTML元素的方法總結(jié)
除了getElementsByClassName()函數(shù),我們可以自己動(dòng)手編寫程式來通過class獲取元素,接下來我們整理了一下JavaScript通過HTML的class來獲取HTML元素的方法總結(jié),需要的朋友可以參考下
2016-05-05
JS實(shí)現(xiàn)簡單可拖動(dòng)的模態(tài)框
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡單可拖動(dòng)的模態(tài)框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
微信小程序-API接口安全詳解
這篇文章主要介紹了微信小程序-API接口安全詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-07-07
Highcharts 非常實(shí)用的Javascript統(tǒng)計(jì)圖demo示例
官網(wǎng)實(shí)例中給出了各式各樣的demo，可以參照document修改自己需要的即可，本文實(shí)現(xiàn)的是一個(gè)學(xué)生成績走勢(shì)demo，有需求的朋友可以參考下哈，希望對(duì)大家有所幫助
2013-07-07
JavaScript獲取當(dāng)前時(shí)間戳5種方法匯總
很多時(shí)候我們都把時(shí)間戳作為id值,下面這篇文章主要給大家介紹了關(guān)于JavaScript獲取當(dāng)前時(shí)間戳的5種方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-10-10
淺談如何循序漸進(jìn)的學(xué)好JS
如何才能學(xué)好JS？在這里給大家總結(jié)一些學(xué)習(xí)Js的經(jīng)驗(yàn)，希望能對(duì)你們有所幫助。
2021-05-05
關(guān)于JS與jQuery中的文檔加載問題
本文通過實(shí)例代碼給大家講解了js和jquery中的文檔加載問題，感興趣的的朋友一起看看吧
2017-08-08
js操作數(shù)據(jù)庫實(shí)現(xiàn)注冊(cè)和登陸的簡單實(shí)例
下面小編就為大家?guī)硪黄猨s操作數(shù)據(jù)庫實(shí)現(xiàn)注冊(cè)和登陸的簡單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-05-05
js 三級(jí)關(guān)聯(lián)菜單效果實(shí)例
這篇文章介紹了js 三級(jí)關(guān)聯(lián)菜單效果，有需要的朋友可以參考一下
2013-08-08
javascript substr和substring用法比較
在js中substring和substr都是用來截取字符串的，那么substring和substr之間的具體區(qū)別在哪里，有沒有區(qū)別呢，下面我來給各位詳細(xì)引用一些實(shí)例來介紹這些問題
2009-06-06