zoukankan      html  css  js  c++  java
  • ajax方式表单拦截

    html

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8">
    </head>
    <body>
        <form method="post" action="http://www.baidu.com" onsubmit="return check()" >
            姓名:<input type="text" name="uName" id="uName" onblur="checkName();"><span class="message"></span><br/>
            密码:<input type="password" name="uPwd" id="uPwd" onblur="checkPwd()"><span class="message" ></span><br/>
            <input type="submit" value="登录">
        </form>
    <script type="text/javascript" src="login.js"></script>
    </body>
    </html>

    JS

    function checkName(){
        var uName=document.getElementById("uName")
        var name=uName.value;
        var message=uName.nextSibling;
        if(name.length==0){
            message.innerHTML="用户名不能为空"
        // this.focus();
            return false;
        }else if (name.length<4||name.length>10){
            message.innerHTML="用户名长度为4-10位之间"
            return false;
        }else{
            message.innerHTML="用户名输入正确"
            return true;
        }
    }
    
    function checkPwd(){
        var uPwd=document.getElementById("uPwd");
        var pwd=uPwd.value;
        var message=uPwd.nextSibling;
        if(pwd.length==0){
            message.innerText="用户密码不能为空"
            return false;
        }else{
            message.innerText="用户密码输入正确"
            return true;
        }
    }
    
    function check(){
      if(checkName()&&checkPwd()){
        //发送ajax   //操作成功后 返回true  否则返回false
     }
    }

    可以通过check这个函数的返回结果控制表单的跳转,为true 才跳转

  • 相关阅读:
    数列分块入门 1-8
    最远点对 [线段树+树的直径]
    实验室外的攻防战 UOJ#180 [树状数组]
    二叉搜索树 [四边形不等式优化区间dp]
    树上的等差数列 [树形dp]
    序列 [树状数组+离散化]
    ATcoder1983 BBQ Hard
    8.18日报
    8.17日报
    8.16日报
  • 原文地址:https://www.cnblogs.com/bruce-gou/p/5226184.html
Copyright © 2011-2022 走看看