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