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

  • 相关阅读:
    gitbook 入门
    mac 手动卸载软件位置
    idea 版本控制忽略文件、文件夹设置
    Mac .DS_Store 隐藏文件和清理.DS_Store的方法
    mac 打开整个系统的隐藏文件
    js拼接字符串,字符串转数组
    新一代 javascript 模板引擎:artTemplate-3.0
    webpack+express多页站点开发
    Vue2学习笔记:组件(Component)
    Vue2学习笔记:过渡效果css
  • 原文地址:https://www.cnblogs.com/durui/p/7625783.html
Copyright © 2011-2022 走看看