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 才跳转

  • 相关阅读:
    [loj3364]植物比较
    [loj3366]嘉年华奖券
    [atARC105F]Lights Out on Connected Graph
    [atARC105D]Let's Play Nim
    [atARC058F]Lroha Loves Strings
    [loj3347]有趣的旅途
    [atAGC001F]Wide Swap
    [cf1392I]Kevin and Grid
    [loj3340]命运
    [loj3046]语言
  • 原文地址:https://www.cnblogs.com/bruce-gou/p/5226184.html
Copyright © 2011-2022 走看看