zoukankan      html  css  js  c++  java
  • ajax验证登录注册

    <form id="form1" onsubmit="return false;">
    <table id="login-table">
    <tr>
    <td width="60">学号:</td>
    <td><input class="textbox" type="text" style="160px;" id="txtUserName"
    maxlength="9" onblur="checkUserName()" onclick="$.trim(this.value)"/><span></span>
    </td>
    </tr>
    <tr>
    <td width="60">密码:</td>
    <td><input class="textbox" type="password" style="160px;" id="txtUserPwd"
    onblur="checkUserPwd()" onclick="$.trim(this.value)" /><span></span>
    </td>
    </tr>
    <tr>
    <td width="60">验证码:</td>
    <td><input class="textbox" type="text" style="160px;" maxlength="5"
    id="txtCheckCode" onblur="checkCheckCode()" onclick="$.trim(this.value)"/><span>
    </span>
    </td>
    </tr>
    <tr>
    <td width="60"></td>
    <td><div style="color:#808080;">输入下图中的字符,不区分大小写</div><br />
    <img src="CheckCode.aspx" style="vertical-align:middle;" alt="验证码" id="imgCheckCode" />
    <a href="#" id="change_image">看不清,换一张</a></td>
    </tr>
    <tr>
    <td width="60"></td>
    <td><input type="image" src="App_Themes/Images/btn_login.jpg" id="btnLogin"
    alt="马上登录" style="border:0;"/></td>
    </tr>
    </table>
    </form>


    <script language="javascript" type="text/javascript" >
    $(document).ready(function(){
    // 验证码更新
    $('#change_image').click(
    function(){
    $('#imgCheckCode').attr('src','CheckCode.aspx?'+Math.random());
    });
    //关键的代码
    $("#btnLogin").click(function(){
    if(checkUserName() && checkUserPwd() && checkCheckCode())
    {
    var data = {
    UserName: $('#txtUserName').val(),
    UserPwd: $('#txtUserPwd').val(),
    CheckCode: $('#txtCheckCode').val()
    };
    //提交数据给Login.ashx页面处理
    $.post("Ajax/Login.ashx",data,function(result){
    if(result == "1") //登录成功
    {
    alert("登录成功!您可以进行其他操作了!");
    // 关闭模拟窗口
    window.parent.window.jBox.close();
    }
    else if(result == "2") //验证码错误
    {
    $('#txtCheckCode').next("span").css("color","red").text("*
    验证码错误");
    }
    else
    {
    alert("登录失败!请重试");
    }
    });
    }
    else
    {
    checkUserName();
    checkUserPwd();
    checkCheckCode();
    }
    });
    });

    //check the userName
    function checkUserName()
    {
    if($("#txtUserName").val().length == 0)
    {
    $("#txtUserName").next("span").css("color","red").text("*用户名不为空");
    return false;
    }
    else
    {
    var reg = /^d{9}$/;
    if(!reg.test($('#txtUserName').val()))
    {
    $('#txtUserName').next("span").css("color","red").text("*正确的格式
    如:030602888");
    return false;
    }
    else
    {
    $("#txtUserName").next("span").css("color","red").text("");
    return true;
    }
    }
    }
    //check the pwd
    function checkUserPwd()
    {
    if($('#txtUserPwd').val().length == 0)
    {
    $('#txtUserPwd').next("span").css("color","red").text("*密码不为空");
    return false;
    }
    else
    {
    $('#txtUserPwd').next("span").css("color","red").text("");
    return true;
    }
    }
    // check the check code
    function checkCheckCode()
    {
    if($('#txtCheckCode').val().length == 0)
    {
    $('#txtCheckCode').next("span").css("color","red").text("*验证码不为空");
    return false;
    }
    else
    {
    $('#txtCheckCode').next("span").css("color","red").text("");
    return true;
    }
    }

  • 相关阅读:
    怎样去阅读一份php源代码
    Cloudera Hadoop 4系列实战课程(电商业日志流量分析项目)
    ORACLE系列之SQL从入门到精通(全面把控数据库基础)
    jQuery2.0应用开发:SSH框架整合jQuery2.0实战OA办公自动化
    Unity3D游戏引擎实战开发从入门到精通
    中国移动:物联网项目实战开发企业级应用(ssp框架应用、EXTJS4.2、GoogleMap、JPA)
    基于OpenLayers实战地理信息系统(离线地图,通过基站转经纬度,Quartz深入,轨迹实战)
    Android自动化测试从入门到精通
    博客从新开张啦!
    python scrapy版 极客学院爬虫V2
  • 原文地址:https://www.cnblogs.com/1rui/p/5504733.html
Copyright © 2011-2022 走看看