網上看到很不錯的阻止form空表單提交
第一種方法
<div class="warp"> <h2>登錄到pfan空間</h2> <p>這里有更多的知識分享,交流。</p> <form action="/register" method = "post" > <input type="text" name = "username" placeholder = "請輸入注冊用戶名"> <br /> <input type="password" name = "pwd" placeholder = "請輸入初始密碼"> <br /> <input type="password" name = "aginpwd" placeholder = "請再次輸入密碼"> <br /> <input type="submit" value ="注冊" class="login_btn"> </form> </div> <script> var form = document.forms[0], submit = document.querySelector(".login_btn"), inputBtn = document.getElementsByTagName("input"); console.log(form); form.onsubmit = function(){ if(inputBtn[0].value == ""){ alert("請您認真填寫注冊用戶名!"); return false; }else if(inputBtn[1].value == ""){ alert("請您認真輸入初始密碼!"); return false; }else if(inputBtn[2].value == ""){ alert("請您再次輸入密碼"); return false; }else if(inputBtn[1].value != inputBtn[2].value){ alert("兩次密碼輸入不匹配,請更正!"); return false; } } </script>
第二種
<div class="warp"> <h2>登錄到pfan空間</h2> <p>這里有更多的知識分享,交流。</p> <form action="/register" method = "post" > <input type="text" name = "username" placeholder = "請輸入注冊用戶名"> <br /> <input type="password" name = "pwd" placeholder = "請輸入初始密碼"> <br /> <input type="password" name = "aginpwd" placeholder = "請再次輸入密碼"> <br /> <input type="submit" value ="注冊" class="login_btn"> </form> </div> <script> var form = document.forms[0], submit = document.querySelector(".login_btn"), inputBtn = document.getElementsByTagName("input"); console.log(form); form.addEventListener("submit",function(e){ if(inputBtn[0].value == ""){ alert("請您認真填寫注冊用戶名!"); e.preventDefault(); }else if(inputBtn[1].value == ""){ alert("請您認真輸入初始密碼!"); e.preventDefault(); }else if(inputBtn[2].value == ""){ alert("請您再次輸入密碼"); e.preventDefault(); }else if(inputBtn[1].value != inputBtn[2].value){ alert("兩次密碼輸入不匹配,請更正!"); e.preventDefault(); } },false); </script>
參考:http://www.cnblogs.com/pingfan1990/p/4655233.html