阻止form表单提交的问题

　　阻止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