zoukankan      html  css  js  c++  java
  • 阻止form空表单提交----JavaScript

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

  • 相关阅读:
    HDU1266 Reverse Number
    codevs1380 没有上司的舞会
    codevs1163 访问艺术馆
    codevs2144 砝码称重 2
    codevs1553 互斥的数
    codevs1230 元素查找
    codevs3118 高精度练习之除法
    codevs1245 最小的N个和
    codevs1063 合并果子
    codevs1052 地鼠游戏
  • 原文地址:https://www.cnblogs.com/durui/p/7625783.html
Copyright © 2011-2022 走看看