js 在表單提交前進行操作


最近在寫頁面的時候,需要手動寫一些在表單進行提交前的驗證操作,正好看到了2種阻止表單提交的方法,可以進行一些邏輯處理

方法一:使用return false

原生js寫法:
<form id="loginForm" name="loginForm" action="login.aspx" method="post">
 <button type="submit" value="Submit" id="submit">Submit</button>
</form>

<script>
 var submitBtn = document.getElementById("submit");

 submitBtn.onclick = function (event) {
  alert("preventDefault!");
  return false;
 };
</script>

jquery寫法:
<script>
$("#loginForm").submit(function(){
if(條件){
    //此處這里進行邏輯處理
}else{
    return false;
}
})
</script>

//這里發現的一個問題就是,在用jq寫法的時候,只要不返回false,邏輯處理完也會自動提交表單

方法二:使用preventDefault()

<form name="loginForm" action="login.aspx" method="post">
 <button type="submit" value="Submit" id="submit">Submit</button>
</form>

<script>
 var submitBtn = document.getElementById("submit");

 submitBtn.onclick = function (event) {
  alert("preventDefault!");
  var event = event || window.event;
  event.preventDefault(); // 兼容標准瀏覽器
  window.event.returnValue = false; // 兼容IE6~8
 };
</script>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM