1. 程式人生 > >阻止form空表單提交----JavaScript

阻止form空表單提交----JavaScript

tde query hold != www 輸入密碼 func 阻止 select

網上看到很不錯的阻止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

阻止form空表單提交----JavaScript