最近在寫頁面的時候,需要手動寫一些在表單進行提交前的驗證操作,正好看到了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>