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;
    }
    }

  • 相关阅读:
    synchronized 关键字
    synchronized 关键字
    Linux IPC之共享内存
    链表的插入、删除
    链式队列的实现
    链栈的实现
    双色、三色排序问题
    memmove、memcpy、strcpy、memset的实现
    字符串中去掉多余的空格
    华为机试:从一个数组中选取不同的数(均小于10)组成一个最大的三位数
  • 原文地址:https://www.cnblogs.com/1rui/p/5504733.html
Copyright © 2011-2022 走看看