码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2017-10-04 17:07:02      阅读:184      评论:0      收藏:0      [点我收藏+]

标签:用户名   form   name   rip   pre   orm   表单   on()   add   

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

标签:用户名   form   name   rip   pre   orm   表单   on()   add   

原文地址:http://www.cnblogs.com/durui/p/7625783.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!