js如何阻止表單提交簡單介紹

admin發表於2017-04-15
JS

本章節介紹一下如何阻止表單提交，先看一段程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload=function(){
  var obt=document.getElementById("bt");
  obt.onclick=function(){
    return false;
  } 
}
</script>
</head>
<body>
<form action="http://www.softwhy.com/" method="get">
  <label for="email">郵箱:</label><input id="email" name="email" type="email" /> 
  <input id="bt" type="submit" value="確定">
</form>
</body>
</html>

使用控制程式碼方式註冊事件處理函式，在事件處理函式中返回true即可實現阻止表單提交的功能。

但是使用addEventListener()方法註冊事件處理函式，事件處理函式中返回true則無法阻止表單提交。

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload=function(){
  var obt=document.getElementById("bt");
  obt.addEventListener("click",function(ev){
    ev.preventDefault();
  },false);
}
</script>
</head>
<body>
<form action="http://www.softwhy.com/" method="get">
  <label for="email">郵箱:</label><input id="email" name="email" type="email" /> 
  <input id="bt" type="submit" value="確定">
</form>
</body>
</html>

必須要使用preventDefault()方法才能夠阻止表單提交動作。

更多內容可以參閱相關閱讀:

（1）.addEventListener()可以參閱addEventListener()一章節。

（2）.preventDefault()可以參閱javascript preventDefault()一章節。

相關文章