标签：
阻止form表单提交这种场景可能在生活中，我们经常碰到，而在我们第一印象里面可能我们用return false 去阻止表单默认行为。
但是，有中情况我们用return false 不能阻止表单提交
<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(){ 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; } },false); </script>
以上代码我们看着，好像没有错误，但是，表单依然可以提交，测试环境chrome。
但是我们将return false 改成用 e.preventDefault()，却可以达到阻止表单提交的效果：
<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>
另一种就是将其改成用onsubmit:
<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>
参考资料
http://stackoverflow.com/questions/4924036/return-false-on-addeventlistener-submit-still-submits-the-form
标签：
原文地址：http://www.cnblogs.com/pingfan1990/p/4655233.html
