9 完整的用户注册登录实例

实例说明:

     1.运行时会弹出login登录页面,用户输入用户名id,密码和验证验后,点击按钮登录,如果id或密码或验证码不正确,则系统会给予提示,如果登录成功,则会在欢迎页面上显示欢迎信息。

     2.在login页面上有个"注册"连接,是让新用户注册用的。用户在输入密码时会显示密码的强度,小于6位数的为弱,除了带有字母、数字以外的其它字符为强如#,*等,其它为中。

        在注册时会检查要输入的项是否都已输入,也会检查用户的邮箱格式是否正确(用js的正则表达式),如果注册成功会弹出个跳转页面,3秒后显示欢迎页面。

如下截图(用 jQuery):

   目录图:数据集:

 

数据集的ReturnUserID的原形为:

INSERT INTO [dbo].[T_User] ([UserName], [Password], [Email]) output inserted.id VALUES (@UserName, @Password, @Email)

并设置此方法的属性,如下图:

定义出错信息显示的css:

.error 
{
    background-color:Red;
}

服务端产生随机验证码的处理程序:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Drawing;
using System.Web.SessionState;
using System.Drawing.Imaging;

namespace Register
{
    /// <summary>
    /// HandRegisterCode 的摘要说明
    /// </summary>
    public class HandRegisterCode : IHttpHandler,IRequiresSessionState
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "image/JPEG";
            using (Bitmap bmp = new Bitmap(60, 30))
            {
                using (Graphics g = Graphics.FromImage(bmp))
                {
                    Random rand = new Random();
                    int value = rand.Next(1000, 9999);
                    HttpContext.Current.Session["code"] = value;
                    string svalue = value.ToString();
                    g.DrawString(svalue, new Font("宋体", 20), Brushes.Aquamarine, new PointF(0, 0));
                    bmp.Save(context.Response.OutputStream, ImageFormat.Jpeg);
                }
            }
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

登录页html:

  

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="Register.Login" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>    
    <link href="css/StyleSheet1.css" rel="stylesheet" type="text/css" />

    <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#<%=btnLogin1.ClientID %>").click(function () {
                var userid = $("#<%=txtUserID.ClientID %>").val();
                if (userid.length <= 0) {
                    $("#errmsg").text("请输入用户ID").css("display", "");

                    return false;
                };

                var pwd = $("#<%=txtPWD.ClientID %>").val();
                if (pwd.length <= 0) {
                    $("#errmsg").text("请输入用户密码").css("display", "");
                    return false;
                };

            });


        });
           
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>    
    <table   border="0" cellspacing="0" cellpadding="0" width="40%">
        <tr>
            <td>
                <asp:Label ID="Label1" runat="server" Text="用户ID:" 
                    AssociatedControlID="txtUserID"></asp:Label>
            </td>
            <td >
                <asp:TextBox ID="txtUserID" runat="server"></asp:TextBox>
            </td>
        </tr>

        <tr>            
          <td>
              <asp:Label ID="Label2" runat="server" Text="密码:" AssociatedControlID="txtPWD"></asp:Label>
          </td> 
          <td>
              <asp:TextBox ID="txtPWD" runat="server"></asp:TextBox>
          </td> 
        </tr>

        <tr>
            <td>
                <img src="HandRegisterCode.ashx" alt="验证码" id="img" onclick="this.src='HandRegisterCode.ashx?aa='+new Date()"></a>
          </td> 
          <td>
              <asp:TextBox ID="txtRegisterCode" runat="server"></asp:TextBox>
          </td>                     
        </tr>
         
        <tr>
            <td>
               
          </td> 
          <td>
              <asp:Label ID="lblmsg" CssClass="error" Visible="False" runat="server" Text=""></asp:Label>
              <label id="errmsg" class="error" style="display:none"></label>
          </td>  
                
        </tr>

        <tr>
          <td>
              <asp:Button ID="btnLogin1" runat="server" Text="登录" onclick="btnLogin1_Click" 
                  style="height: 21px" />
          </td> 

          <td>
            <a href="Registrer.aspx">注册</a>
          
          </td>  
            
        </tr>
    </table>
    </div>
    </form>
</body>
</html>

登录页的cs代码:

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Register.DAL.DataSetUserTableAdapters;

namespace Register
{
    public partial class Login : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }
        private bool CheckInput()
        {
            bool b=false;
            if (txtUserID.Text.Length <= 0)
            {
                lblmsg.Text = "请输入用户ID";
                lblmsg.Visible=true;
                return b;
            };
            if (txtPWD.Text.Length <= 0)
            {
                lblmsg.Text = "请输入用户密码";
                lblmsg.Visible = true;
                return b;
            }

            if (txtRegisterCode.Text != Convert.ToString(Session["code"]))
            {
                lblmsg.Text = "输入的验证码不正确.";
                lblmsg.Visible=true;
                return b;
            }
            lblmsg.Visible=false;
            return true;
        }
        protected void btnLogin1_Click(object sender, EventArgs e)
        {
            if (!CheckInput())
                return;
            long id = Convert.ToInt64(txtUserID.Text);
            T_UserTableAdapter adapter = new T_UserTableAdapter();
            
            var data = adapter.GetDataByID(id);
            if (data.Count >= 1)
            {
                
                var user = data.Single();
                if (user.Password != txtPWD.Text)
                {   
                    lblmsg.Text = "用户密码不正确.";
                    lblmsg.Visible = true;
                    return;
                }
                else
                {
                    lblmsg.Visible = false;
                    Session["ID"] = id;
                    Response.Redirect("~/welcom.aspx");
                }
            }
            else
            {
                lblmsg.Text = "此用户ID不存在";
                lblmsg.Visible = true;
                return;
            }
           
        }
    }
}

注册页的html:

 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Registrer.aspx.cs" Inherits="Register.Registrer" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="css/StyleSheet1.css" rel="Stylesheet" type="text/css" />
    <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#<%=txtPassword2.ClientID %>").blur(function () {
                var pw1 = $("#<%=txtPassowrd.ClientID %>").val();
                var pw2 = $(this).val();
                if (pw1 != pw2) {
                    alert("两次输入的密码不一样");
                    return false;
                }
            });

            $("#<%=txtPassowrd.ClientID %>").blur(function () {
                var svalue = $(this).val();
                if (svalue.length <= 6) {
                    $("#lblhint").text("密码强度:弱");
                } else {
                    var regex = /\W/; //判断是否含有字母数字
                    if (regex.test(svalue)) {
                        $("#lblhint").text("密码强度:强");
                    }
                    else {
                        $("#lblhint").text("密码强度:中");
                    }

                }
            });

            $("#<%=form1.ClientID %>").submit(function () {
                var pw1 = $("#<%=txtPassowrd.ClientID %>").val();
                var pw2 = $("#<%=txtPassword2.ClientID %>").val();
                if (pw1 != pw2) {
                    alert("两次输入的密码不一样");
                    return false;
                }

                var regex = /.+@.+/;
                var email = $("#<%=txtEmail.ClientID %>").val();
                if (!regex.test(email)) {
                    alert("邮箱格式不正确.");
                    return false;
                }
            });
        });
    </script>
    <style type="text/css">
        .style1
        {
            width: 165px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <table border="0" cellspacing="0" cellpadding="0" style="width: 30%">
        <tr>
            <td>
                <asp:Label ID="Label1" runat="server" Text="用户名:" 
                    AssociatedControlID="txtUserName"></asp:Label></td>
            <td class="style1">
                <asp:TextBox ID="txtUserName" runat="server" AutoPostBack="True" 
                    ontextchanged="txtUserName_TextChanged"></asp:TextBox></td>
        </tr>
        <tr>
            <td>
                <asp:Label ID="Label2" runat="server" Text="密码:" 
                    AssociatedControlID="txtPassowrd"></asp:Label></td>
            <td class="style1">
                <asp:TextBox ID="txtPassowrd" runat="server"></asp:TextBox></td>
                <td><asp:Label ID="lblhint" runat="server" Text=""></asp:Label></td>
                
        </tr>
        
        <tr>
            <td>
                <asp:Label ID="Label3" runat="server" Text="重复密码:" 
                    AssociatedControlID="txtPassword2"></asp:Label></td>
            <td class="style1">
                <asp:TextBox ID="txtPassword2" runat="server"></asp:TextBox></td>
        </tr>
        <tr>
          <td>
              <asp:Label ID="Label4" runat="server" Text="邮箱" AssociatedControlID="txtEmail"></asp:Label></td>
          <td>
              <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox></td>
        </tr>
        <tr>
            <td>
                <asp:Button ID="btnRegister" runat="server" Text="提交" 
                    onclick="btnRegister_Click" /></td>
            <td class="style1">
                <asp:Label ID="lblmsg" runat="server" CssClass="error" Text="Label" 
                    Visible="False"></asp:Label></td>
        </tr>
    </table>
    </div>
    </form>
</body>
</html>

注册页的cs码:

  

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Register.DAL.DataSetUserTableAdapters;
using System.Text.RegularExpressions;

namespace Register
{
    public partial class Registrer : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void txtUserName_TextChanged(object sender, EventArgs e)
        {
            string username = txtUserName.Text;
            T_UserTableAdapter adapter = new T_UserTableAdapter();
            var data = adapter.GetDataByName(username);
            if (data.Count >= 1)
            {
                lblmsg.Text = "此用户名已存在";
                lblmsg.Visible = true;
                return;
            }
        }
        private bool checkinput()
        {

            if (txtUserName.Text.Length <= 0)
            {
                lblmsg.Text = "请输入用户名";
                lblmsg.Visible = true;
                return false;
            };
            if (txtPassowrd.Text.Length<=0)
            {
                lblmsg.Text = "请输入密码";
                lblmsg.Visible = true;
                return false;
            }
            if (txtPassword2.Text!=txtPassowrd.Text)
            {
                lblmsg.Text = "两次输入密码不一样";
                lblmsg.Visible = true;
                return false;
            }
            
            Regex regex=new Regex(".+@.+");
            if (!regex.IsMatch(txtEmail.Text))
            {
               lblmsg.Text = "邮箱格式不正确.";
                lblmsg.Visible = true;
                return false;
            }

            lblmsg.Visible=false;
            return true;

        }
        protected void btnRegister_Click(object sender, EventArgs e)
        {
            if (!checkinput())
                return;
            T_UserTableAdapter adapter = new T_UserTableAdapter();
            long id =Convert.ToInt64(adapter.ReturnUserID(txtUserName.Text, txtPassowrd.Text, txtEmail.Text));
            Session["ID"] = id;
            Response.Redirect("ShowMsg.aspx?msg=页面即将跳转...&page=welcom.aspx");
        }
    }
}

跳转页的html:

 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ShowMsg.aspx.cs" Inherits="Register.ShowMsg" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        setInterval(function () {
            window.location.href = '<%=Request["page"] %>';
        }, 3000);
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    </div>
    </form>
</body>
</html>

跳转页的cs码:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Register
{
    public partial class ShowMsg : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                Response.Write(Request["msg"]);
            }
        }
    }
}

欢迎页的html:

 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="welcom.aspx.cs" Inherits="Register.welcom" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    </div>
    </form>
</body>
</html>

欢迎页的cs码:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Register.DAL.DataSetUserTableAdapters;

namespace Register
{
    public partial class welcom : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                long id = Convert.ToInt64(Session["ID"]);
                T_UserTableAdapter adapter = new T_UserTableAdapter();
                var data = adapter.GetDataByID(id);
                if (data.Count >= 1)
                {
                    var user = data.Single();
                    string sname = user.UserName;
                    Response.Write(string.Format("欢迎ID:({0})的到来,你的名称为{1}",id,sname));
                }
            }
          
        }
    }
}

 

posted on 2013-06-09 15:50  天上星  阅读(1116)  评论(0编辑  收藏  举报

导航