asp.net登录注册验证（jquery异步调用）

来源：互联网发布：java 多个变量初始化编辑：程序博客网时间：2024/05/16 05:32

1、登录注册在同一个页面上，不能再一个form表单中提交。（可以尝试些一个form，根据不同的点击条件进行不同的时间，注意空间名字的命名）

2、前端登录界面代码（不含js和css样式）

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="default.aspx.cs" Inherits="about" %><%@ Register Src="../ascx/header.ascx" TagName="header" TagPrefix="uc1" %><%@ Register Src="../ascx/footer.ascx" TagName="footer" TagPrefix="uc2" %><!DOCTYPE html><html><head runat="server">    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <meta name="description" content="" />    <meta name="keywords" content="" />    <link type="text/css" href="../images/icon.ico" rel="shortcut icon" />    <link type="text/css" href="../css/base.css" rel="stylesheet" />    <link type="text/css" href="../css/page.css" rel="stylesheet" />    <script src="../js/jquery.js" type="text/javascript"></script>    <script type="text/javascript" src="../webjs/loginjs.js"></script>    <script src="../webjs/Register.js" type="text/javascript"></script>    <title>眼部整形</title></head><body>    <uc1:header ID="header1" runat="server" />    <div class="banner">        <img src="../images/banner1.jpg"></div>    <div class="winWidth wid1100">        <div class="clearfix pR pdb55">            <!--=============================登录=========================-->            <%--   <form id="loginform" runat="server">--%>            <div class="mdeng fl">                <div class="mlu_title">                    <p>                        会员登录</p>                </div>                <ul class="mhui">                    <li class="mjiao1"><span>用户名：</span>                        <input class="search1" type="text" id="txt_Name" name="txt_Name" />                        <span id="span_name"></span></li>                    <li class="mjiao1 mjiao1_1"><span>密  码：</span>                        <input class="search1" type="password" id="Txt_PassWord" />                        <span id="span_pwd"></span></li>                    <li class="mjiao2"><span>验证码：</span>                        <input class="search1" type="text" id="Txt_Code1" />                        <%-- <a title="看不清" href="javascript:;" onclick="document.getElementById('<%=txt_YanCode.ClientID%>').src='?width=0&height=0&<%=txt_YanCode.UniqueID%>='+Math.random();"                                class="refresh">                                <My:ValidateCodeImage ID="txt_YanCode" runat="server" CssClass="refresh-img" title="点击换下一张" />--%>                        <img id="img2" src="/VerifyCode.aspx" title="看不清？点击更换" alt="验证码" style="cursor: pointer;                            margin-right: 20px;" onclick="this.src=this.src+'?';" width="100" height="32" />                        <span id="span_code" style="width: 100px;"></span></li>                    <li class="mjiao3">                        <input type="checkbox" />请保存我这次的登录信息 <a href="/login-register/find.htm" style="cursor: pointer;">                            忘记密码？</a> </li>                    <li class="mjiao4">                        <input id="btn_login" value="登录" class="search" /></li>                </ul>            </div>            <%--     </form>--%>            <!--=============================注册=========================-->            <form id="Form1" name="form1" runat="server" method="post" onsubmit="return chkForm();">            <div class="mdeng fr">                <div class="mlu_title">                    <p>                        会员注册</p>                </div>                <ul class="mhui">                    <li class="mjiao1"><span>用 户 名：</span>                        <input class="search1" type="text" id="customerId" runat="server" onblur="regname()"/>                        <div id="customerIdMes" style="color: Red;">                        </div>                    </li>                    <li class="mjiao1 mjiao1_1"><span>密    码：</span>                        <input class="search1" id="passwordstr" type="password" runat="server">                        <div id="passwordMes" style="color: Red;">                        </div>                    </li>                    <li class="mjiao1 mjiao1_1"><span>确认密码：</span>                        <input class="search1" id="Repassword" type="password" runat="server">                        <div id="RepasswordMes" style="color: Red;">                        </div>                    </li>                    <li class="mjiao1 mjiao1_2"><span>找回密码问题：</span>                        <input type="text" class="search1" id="question" runat="server">                        <div id="questionMes" style="color: Red;">                        </div>                    </li>                    <li class="mjiao1 mjiao1_2"><span>找回密码答案：</span>                        <input type="text" class="search1" id="answer" runat="server">                        <div id="answerMes" style="color: Red;">                        </div>                    </li>                    <li class="mjiao2"><span>验 证 码：</span>                        <input class="search1" type="text" id="Txt_Code2"  runat="server" />                        <img id="img3" src="/VerifyCodeNew.aspx" title="看不清？点击更换" alt="验证码" style="cursor: pointer;                            margin-right: 20px;" onclick="this.src=this.src+'?';" width="100" height="32" />                     <%--   <div id="span_code2" style="color: Red;"></div>--%>                        <span id="span_code2" style="width: 100px;"></span>                    </li>                    <li class="mjiao4 mjiao5">                        <input id="btn_register" value="注 册" class="search" /></li>                    <%-- <asp:Button ID="Submit" runat="server" Text="注 册" CssClass="search" OnClick="Submit_Click" />--%>                    </li>                                   </ul>            </div>            </form>        </div>    </div>    <!--End .main-->    <uc2:footer ID="footer1" runat="server" /></body></html>

3、登录loginin.js

$(function () {    //--------------------------------用户登录方法开始-----------------------------    //用户登录验证    $("#btn_login").click(function () {        $.post(            "/ashx/UserCheck.ashx", {                typename: "login",                Name: $("#txt_Name").val(),                pwd: $("#Txt_PassWord").val(),                logincode: $("#Txt_Code1").val()            },            function (returndata) {                //                    alert(returndata);                if (returndata == "1") {                                            location.href = "/menber/default.aspx";                } else {                                            alert("登录失败，请输入正确的用户名和密码！");                }            });    });    //用户登录时验证码的验证    $("#Txt_Code1").blur(function () {        if ($("#Txt_Code1").val() == "") {            $("#span_code").html("验证码不能为空.");            $("#span_code").css("color", "red");        } else {            $.post(                "/ashx/UserCheck.ashx", {                    typename: "logincodeverify",                    logincode: $("#Txt_Code1").val()                },                function (returndata) {                    if (returndata == "1") {                        $("#span_code").html("验证码正确");                        $("#span_code").css("color", "green");//                        $("#btn_login").removeAttr("disabled");                    }                    else {                        $("#span_code").html("验证码输入错误！");                        $("#span_code").css("color", "red");//                        $("#btn_login").attr("disabled", "disabled");                    }                });        }    });    //--------------------------------用户登录方法结束-----------------------------});     //jquery结束

3、注册js代码

//function $ajax(sUrl, json, fun) { $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", dataType: "json", url: sUrl, data: json, success: fun }); };$(function () {    //用户名是否存在验证    $("#customerId").blur(function () {        var inputVal = $("#customerId").val();        var reg = /[\w\d]{6,}/g;        if (inputVal == "") {            $("#customerIdMes").html("不允许为空");            //            $("#btn_register").attr("disabled", "disabled");        } else if (!reg.test(inputVal)) {            $("#customerIdMes").html("* 请输入6位以上的英文字母或数字的组合");            $("#customerIdMes").css("color", "red");            //            $("#btn_register").attr("disabled", "disabled");        } else {            //异步验证用户名是否存在            $.post(                "/ashx/UserCheck.ashx", {                    typename: "usernameverify",                    userName: $("#customerId").val()                },                function (returndata) {                    //用户名存在，返回1。否则返回0                    if (returndata == "1") {                        $("#customerIdMes").html("* 此用户名已被注册").css("color", "red");                        //                        $("#btn_register").attr("disabled", "disabled");                    }                    else {                        $("#customerIdMes").html("恭喜！此用户名可以使用").css("color", "green");                        //                        $("#btn_register").removeAttr("disabled");                    }                });        }    });    //注册密码验证    $("#passwordstr").blur(function () {        //密码验证        var inputVal = $("#passwordstr").val();        var reg = /[\w\d]{6,12}/g;        if (!reg.test(inputVal)) {            $("#passwordMes").html("* 请输入6-12位的英文字母或数字的组合").css("color", "red");            //            $("#btn_register").attr("disabled", "disabled");        } else {            $("#passwordMes").html("");            //            $("#btn_register").removeAttr("disabled");        }    });    //重输密码验证    $("#Repassword").blur(function () {        var inputVal = $("#Repassword").val();        if ($("#Repassword").val() == $("#passwordstr").val()) {            $("#RepasswordMes").html("");            //            $("#btn_register").removeAttr("disabled");        } else {            $("#RepasswordMes").html("* 两次密码输入不同，请重新输入").css("color", "red");            //            $("#btn_register").attr("disabled", "disabled");        }    });    //找回密码问题    $("#question").blur(function () {        if ($(this).val() == "") {            $("#questionMes").html("找回密码问题不允许为空").css("color", "red");            //            $("#btn_register").attr("disabled", "disabled");        } else {            $("#questionMes").html("").css("color", "green");            //            $("#btn_register").removeAttr("disabled");        }    });    //找回密码答案    $("#answer").blur(function () {        if ($(this).val() == "") {            $("#answerMes").html("找回密码答案不允许为空").css("color", "red");            //            $("#btn_register").attr("disabled", "disabled");        } else {            $("#answerMes").html("").css("color", "green");            //            $("#btn_register").removeAttr("disabled");        }    });    //用户注册时验证码的验证    $("#Txt_Code2").blur(function () {        if ($("#Txt_Code2").val() == "") {            $("#span_code2").html("验证码不能为空.");            $("#span_code2").css("color", "red");        } else {            $.post(                "/ashx/UserCheck.ashx", {                    typename: "regcodeverify",                    registercode: $("#Txt_Code2").val()                },                function (returndata) {                    //验证码正确，返回1                    if (returndata == "1") {                        $("#span_code2").html("验证码正确");                        $("#span_code2").css("color", "green");                        //                        $("#btn_register").removeAttr("disabled");                    }                    else {                        $("#span_code2").html("验证码输入错误！");                        $("#span_code2").css("color", "red");                        //                        $("#btn_register").attr("disabled", "disabled");                    }                });        }    });    //处理用户注册    $("#btn_register").click(function () {        //        alert("123");        //异步验证用户名是否存在        $.post(            "/ashx/UserCheck.ashx", {                typename: "register",                userName: $("#customerId").val(),                password: $("#passwordstr").val(),                repassword: $("#Repassword").val(),                question: $("#question").val(),                answer: $("#answer").val(),                registercode: $("#Txt_Code2").val()            },            function (returndata) {                //                alert(returndata);                //注册成功                if (returndata == "1") {                    alert("注册成功，请登录");                    window.location.reload();                }                else {                    alert("注册失败！");                }            });    });    //清空表单内容    $("#passwordstr").val("");    $("#Repassword").val("");    $("#customerId").val("");    $("#question").val("");    $("#answer").val("");    $("#Txt_Code2").val("");    $("#Txt_Code1").val("");    //    $("#mailStr").blur(function () {    //        //邮箱验证    //        var id = $(this).attr("id");    //        var inputVal = $(this).val();    //        var reg = /^[\w\d]?[\w\d]{3,}@[\w\d]+.[\w\d]+/g    //        if (!reg.test(inputVal)) {    //            $("#emailMes").html("格式错误，建议输入您的常用邮箱");    //            $("#emailMes").attr("class", "red");    //        } else {    //            var Email = $("#mailStr").val();    //            $.ajax({    //                type: "Post",    //                url: "../ashx/Product.ashx?Fn=CheckUserEmail&mail=" + Email,    //                success: function (data) {    //                    if (data == 1) {    //                        $("#emailMes").html("恭喜！此邮箱可以使用");    //                        $("#emailMes").attr("class", "green");    //                    } else {    //                        $("#emailMes").html("此邮箱已被注册，请更换");    //                        $("#emailMes").attr("class", "red");    //                    }    //                },    //                error: function (err) {    //                    //alert("网络超时");    //                }    //            });    //        }    //    });});/////////////////////////////////////////////////////////////////////////////////////

4、后端处理代码。这里需要使用System.Web.SessionState命名空间，需要继承IRequiresSessionState接口，该接口标记session的状态可以保存在asp程序池中，这样asp运行时，在其他的后端页面也可以处理到。

<%@ WebHandler Language="C#" Class="UserCheck" %>using System;using System.Web;using System.Web.SessionState;public class UserCheck : IHttpHandler, IRequiresSessionState{        public void ProcessRequest (HttpContext context) {        context.Response.ContentType = "text/plain";        //用户登录验证码验证        if (context.Request["typename"] == "logincodeverify")        {            context.Response.Write(CheckLogincode(context));        }        //用户注册验证码验证        else if (context.Request["typename"] == "regcodeverify")        {            context.Response.Write(CheckRegistercode(context));        }        //注销        else if (context.Request["typename"] == "logout")        {            context.Session.Clear();            context.Response.Write("1");        }        //处理用户登录.这里每次只能进行一个时间        else if (context.Request["typename"] == "login")        {            string result = "0";                        //判断验证码,验证通过            if (CheckLogincode(context) == "1")            {                //判断登录                Model.User loggedUser = checklogin(context);                //用户登录成功                if (loggedUser != null)                {                    context.Session.Add("currentUserId", loggedUser.ID.ToString());                    context.Session.Add("currentUserName", loggedUser.UserName);                    result = "1";                }                //用户登录失败                else {                    result = "0";                }                          }            //验证码验证失败            else {                //失败写出0                result = "0";                            }            context.Response.Write(result);                    }        //用户注册用户名验证        else if (context.Request["typename"] == "usernameverify")        {            context.Response.Write(CheckUserIsExist(context));            }        //用户注册验证        else if(context.Request["typename"] == "register"){            string result = "0";                        //用户名验证,存在返回1            if (CheckUserIsExist(context) == "1")            {                context.Response.Write(result);            }            //验证码验证            else if (CheckRegistercode(context) == "0")            {                context.Response.Write(result);                        }            //用户注册失败            else if (RegisterUser(context) == "0")            {                context.Response.Write(result);            }            else {                result = "1";                context.Response.Write(result);            }                                            }                    }    /// <summary>    /// 添加用户，添加成功返回1    /// </summary>    /// <param name="context"></param>    /// <returns></returns>    public string RegisterUser(HttpContext context) {         string result = "1";        BLL.User userbll = new BLL.User();        Model.User user = new Model.User();                user.UserName = context.Request["userName"].ToString().Trim();        user.Password = context.Request["password"].ToString().Trim();        user.Problem = context.Request["question"].ToString().Trim();        user.Answer = context.Request["answer"].ToString().Trim();        user.IsPass = true;        int i = 0;        try        {            userbll.Add(user, out i);        }        catch(Exception e)        {        }        if (i < 1)        {            result = "0";        }        return result;                                                    }                    /// <summary>    /// 用于检查登录的验证码正确性    /// </summary>    /// <param name="context"></param>    /// <returns></returns>    public string CheckLogincode(HttpContext context)     {        //验证成功返回1        if (context.Request["logincode"].ToString().ToLower() == context.Request.Cookies["CheckCode"].Value.ToLower())        {            return "1";        }        else        {            return "0";//失败选择0        }    }    /// <summary>    /// 用于检查注册的验证码正确性，为1正确    /// </summary>    /// <param name="context"></param>    /// <returns></returns>    public string CheckRegistercode(HttpContext context)    {        try        {            if (context.Request["registercode"].ToString().ToLower() == context.Request.Cookies["CheckCodeNew"].Value.ToLower())            {                return "1";            }            else            {                return "0";            }        }        catch {            return "0";        }    }    /// <summary>    /// 用于登录验证    /// </summary>    /// <param name="context"></param>    /// <returns></returns>    public Model.User checklogin(HttpContext context)    {        string username = context.Request["Name"].ToString();        string pwd = context.Request["pwd"].ToString();        //Model.User model = new BLL.User().GetModelBystrWhere(" UserName='" + username + "' and Password='" + md5(pwd, 16) + "'");        Model.User model = new BLL.User().GetModelBystrWhere(" UserName='" + username + "' and Password='" + pwd + "'");        //Model.User model = new BLL.User().GetModelBystrWhere(" UserName='" + username + "'");        //验证成功        if (model != null)        {            //string ke = GetAppSetting("SessKey");            //context.Session[ke] = username;            //这里放session会出错            //context.Session["userid"] = model.ID;            return model;        }        else        {            //context.Session.Add("userid",model.ID);            //context.Session.Add("user",model);            //Model.User myuser = (Model.User)context.Session["user"];            return null;        }    }    public static string md5(string str, int code)    {        if (code == 16) //16位MD5加密（取32位加密的9~25字符）            {            return System.Web.Security.FormsAuthentication.HashPasswordForStoringInConfigFile(str, "MD5").ToLower().Substring(8, 16);        }        else//32位加密            {            return System.Web.Security.FormsAuthentication.HashPasswordForStoringInConfigFile(str, "MD5").ToLower();        }    }    //检测用户名是否存在.存在返回1，不存在返回0    public static string CheckUserIsExist(HttpContext context)     {        string num = "0";        BLL.User cusBLL = new BLL.User();        string username = context.Request["userName"].ToString().Trim();        if (username != null) {            Model.User cus = cusBLL.GetModelBystrWhere(" UserName='" + username + "'");            if (cus != null)            {                num = "1";            }            else            {                num = "0";            }        }        return num;            }    /// <summary>    /// 获取配置文件KEY VALUE    /// </summary>    /// <param name="key">key</param>    /// <returns></returns>    public static string GetAppSetting(string key)    {        return System.Configuration.ConfigurationManager.AppSettings[key] + "";    }    public bool IsReusable {        get {            return false;        }    }}

5、注意，登录后将用户model放入到session中，需要开启asp的服务，服务名称为：Asp net state service.

6、这里还有验证码的自动获取，将在下篇文章中介绍。

0 0