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