首頁 > 文章 > web前端 > JavaScript如何實作阻止表單提交的程式碼介紹

JavaScript如何實作阻止表單提交的程式碼介紹

巴扎黑原創: 2017-08-18 10:08:051791瀏覽

這篇文章主要介紹了JavaScript阻止表單提交方法,透過程式碼範例講解了阻止表單提交需要注意的事項，以及onSubmit和check（）的區別寫法,需要的朋友可以參考下

<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的阻止預設事件機制，頁面載入之後取得submit元素，然後為submit註冊click回應函數，參數為event事件。
在使用者點選submit觸發回應函數後，直接event.preventDefault();阻止表單轉跳的預設事件。

    第二種方法：在表單form標籤下屬性onsubmit="return checkLength()" 或id="submit"的input標籤下新增屬性checkLength()"
function 函數中   阻止form提交   return false;
      阻止函數中程式碼向下執行   return;

##submit，提交表單，如果直接呼叫函數，則直接提交表單

onSubmit

，提交按鈕點擊時先觸發，然後觸發submit事件。 #透過在JS中用document.myform.name.value,來得到使用者的每一個輸入，進行校驗，當完全通過時，回傳TRUE，反之回傳false。
3. 頁面程式碼實作

/*
<form name="testform" action="hello.html" method="post" onSubmit="return check();">
 <input type="text" name="name">
 <input type="submit" value="提交">
</form>
*/

4. JS的實作

function check(){
 if (document.testform.name.value=="admin") {  
  alert("姓名不正确");  
  return false; 
  }
 else{
  return true;
  }
}

注意

onSubmit的寫法，千萬不要寫成：“check（）”，這樣當檢驗不能通過的時候不會提交表單。

以上是JavaScript如何實作阻止表單提交的程式碼介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：JavaScript實作不刷新上傳檔案的方法介紹下一篇：JavaScript實作不刷新上傳檔案的方法介紹

看更多