购物网第二阶段总结笔记3：用户注册模块

事先工作：

【1】建立用户表：

 分析静态页面的用户信息，可以得出用户表所需的字段，建立用户表Shop_user：

 

 注意：

isopenemail：0表示不公开，1表示公开   默认绑定0

type：用户类型   默认绑定   普通会员normal

sex：男1  女0   保密2  默认绑定为2

其他字段默认值，int 为：0  其他为空：''

 

 

建立用户登录日志表Shop_login_log：

 

 

【2】：使用动软生成器生成代码，并拷贝到项目对应位置。

 

 正式工作：

【1】建立一个页面reg1.aspx，用于显示注册协议，当点击同意协议的时候，进入reg2.aspx页面，没什么好说的。

【2】建立一个reg2.aspx页面，用于用户提交表单，然后后台cs代码把用户提交的注册信息添加到数据库中。

技巧：写后台代码，先写最理想化的状态代码，即不做检验，先把主干代码写出，然后再完善。

 

【一】：理想化的注册cs代码：

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;namespace Web{    public partial class reg2 : System.Web.UI.Page    {        protected void Page_Load(object sender, EventArgs e)        {        }        //重置        protected void btnReset_Click(object sender, EventArgs e)        {            txtusername.Text = "";            txtanswer.Text = "";            txtpwd.Text = "";            txtcpwd.Text = "";            txtquestion.Text = "";            txtemail.Text = "";        }        //提交信息        protected void btnSub_Click(object sender, EventArgs e)        {            string username = txtusername.Text.Trim();            string pwd = txtpwd.Text.Trim();            string cpwd = txtpwd.Text.Trim();            string email = txtemail.Text.Trim();            string answer = txtanswer.Text.Trim();            string question = txtquestion.Text.Trim();           int res= new MyShop.DAL.UserDAO().Add(new MyShop.Model.User() {             username=username,            password=pwd,            email=email,            answer=answer,            question=question                        });           if (res>0)           {               Page.ClientScript.RegisterStartupScript(Page.GetType(),"MsgBox","<script>alert('注册成功！')</script>");               return;           }           else           {               Page.ClientScript.RegisterStartupScript(Page.GetType(), "MsgBox", "<script>alert('注册失败，请联系管理员！')</script>");               return;           }                          }    }}

 

【二】：进一步完善，对用户注册进行验证：

 

如何获取正则表达式：

方式1：利用VS自带的验证控件

 

方法二：利用软件：RegexBuddy

 

 

完善后的代码：

 

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;using System.Text.RegularExpressions;namespace Web{    public partial class reg2 : System.Web.UI.Page    {        protected void Page_Load(object sender, EventArgs e)        {        }        //重置        protected void btnReset_Click(object sender, EventArgs e)        {            txtusername.Text = "";            txtanswer.Text = "";            txtpwd.Text = "";            txtcpwd.Text = "";            txtquestion.Text = "";            txtemail.Text = "";        }        //提交信息        protected void btnSub_Click(object sender, EventArgs e)        {            string username = txtusername.Text.Trim();            string pwd = txtpwd.Text.Trim();            string cpwd = txtpwd.Text.Trim();            string email = txtemail.Text.Trim();            string answer = txtanswer.Text.Trim();            string question = txtquestion.Text.Trim();            if (username.Length == 0 | pwd.Length == 0 || cpwd.Length == 0 || email.Length == 0 || answer.Length == 0 || question.Length == 0)            {                Page.ClientScript.RegisterStartupScript(Page.GetType(), "MsgBox", "<script>alert('请把信息填写完整！')</script>");                return;            }            if (pwd != cpwd)            {                Page.ClientScript.RegisterStartupScript(Page.GetType(), "MsgBox", "<script>alert('两次输入的密码不一致！')</script>");                return;            }            if (!Regex.IsMatch(pwd, "^[a-zA-Z0-9]{6,20}{1}quot;))            {                Page.ClientScript.RegisterStartupScript(Page.GetType(), "MsgBox", "<script>alert('密码长度必须大于6个字符小于20个字符，只能为英语字、数字，例如：snsn2003等！')</script>");                return;            }            if (!Regex.IsMatch(email, @"\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"))            {                Page.ClientScript.RegisterStartupScript(Page.GetType(), "MsgBox", "<script>alert('电子邮件格式错误！')</script>");                return;            }            int res = new MyShop.DAL.UserDAO().Add(new MyShop.Model.User()            {                username = username,                password = pwd,                email = email,                answer = answer,                question = question            });            txtusername.Text = "";            txtanswer.Text = "";            txtpwd.Text = "";            txtcpwd.Text = "";            txtquestion.Text = "";            txtemail.Text = "";            if (res > 0)            {                Page.ClientScript.RegisterStartupScript(Page.GetType(), "MsgBox", "<script>alert('注册成功！')</script>");                return;            }            else            {                Page.ClientScript.RegisterStartupScript(Page.GetType(), "MsgBox", "<script>alert('注册失败，请联系管理员！')</script>");                return;            }        }    }}

上面代码的缺陷：验证这个功能不能只写在服务器上（服务器上的验证也是必须的，这样可以更保险地保证添加到数据库中的数据的正确性），应该在客户端进行验证，能在客户端做的事情不要放在服务器上去做！

进一步完善：

注意：

1：在客户端进行验证（用JS进行验证）：Button控件有一个属性，OnClientClick   ，这个属性可以绑定客户端的JS函数，如果绑定的函数执行成功，则进一步执行OnClick绑定的后台函数。

2：在JS中，是通过

<script type="text/javascript">    var name = document.getElementById('txtname').value;    alert(name);</script>

 

来获取控件的值，但是这种方法在使用母版页的服务器程序中，是获取不到控件的值的，执行会弹出错误的提示：

通过前台运行页面的HTML代码，可以看到在后台我们为TextBox绑定的id，在这里都变成了

 id="ContentPlaceHolder1_txtusername"

 

解决办法：使用<%=txtusername.ClientID %>来转换，把服务器控件id转换成HTML控件id

<script type="text/javascript">    var name = document.getElementById('<%=txtusername.ClientID %>').value;    alert(name);</script>

3：在js中使用正则表达式

在var reg=//g;的双斜杠中间放正则表达式。

 

最后aspx代码中验证的JS代码如下：

 

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"><script type="text/javascript">    function checkform() {        var name = document.getElementById('<%=txtusername.ClientID %>').value;        var pwd = document.getElementById('<%=txtpwd.ClientID %>').value;        var cpwd = document.getElementById('<%=txtcpwd.ClientID %>').value;        var email = document.getElementById('<%=txtemail.ClientID %>').value;        var question = document.getElementById('<%=txtquestion.ClientID %>').value;        var answer = document.getElementById('<%=txtanswer.ClientID %>').value;        if (name.length == 0||pwd.length==0||cpwd.length==0||email.length==0||question.length==0||answer.length==0) {            alert('请把资料填写完整！');        return false;        }        if (pwd != cpwd) {            alert("两次输入的密码不同，请重新输入！");            return false;        }        var reg = /^[a-zA-Z0-9]{6,20}$/g;        if (!reg.test(pwd)) {            alert("密码长度必须大于6个字符小于20个字符，只能为英语字、数字，例如：snsn2003等。 ");            return false;        }        reg = /\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/g;        if (!reg.test(email)) {            alert("email的格式不正确，请重新输入！ ");            return false;        }        return true;    }</script></asp:Content>

【三】：最后完善用户注册模块

 

1：验证用户名是否已经注册（防止同一用户名重复注册）

在UserDAO中添加一个方法，用来判断用户名是否存在

        //判断用户名是否存在        public bool Exists(string username)        {            Database db = DatabaseFactory.CreateDatabase();            StringBuilder strSql = new StringBuilder();            strSql.Append("select count(1) from Shop_user where username=@username ");            DbCommand dbCommand = db.GetSqlStringCommand(strSql.ToString());            db.AddInParameter(dbCommand, "username", DbType.String, username);            int cmdresult;            object obj = db.ExecuteScalar(dbCommand);            if ((Object.Equals(obj, null)) || (Object.Equals(obj, System.DBNull.Value)))            {                cmdresult = 0;            }            else            {                cmdresult = int.Parse(obj.ToString());            }            if (cmdresult == 0)            {                return false;            }            else            {                return true;            }        }

cs里面验证：

             MyShop.DAL.UserDAO udao = new MyShop.DAL.UserDAO();            if (udao.Exists(username))            {                Page.ClientScript.RegisterStartupScript(Page.GetType(), "MsgBox", "<script>alert('用户名已存在！')</script>");                return;            }

缺点：这样验证和上面的验证一样，没有在客户端进行。

 

 

解决之道：AJAX+JQuery进行前台验证用户名（并把上面的JS代码用重写一下），JQuery中提供了trim函数可以去掉文本框中的空格

 （1）重写代码：

1：在项目中新建一个文件夹jquery，用来存放jquery文件：jquery-1.6.1.min.js

2：把jquery-1.6.1.min.js用鼠标拖到aspx代码中。

 

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"><script src="jquery/jquery-1.6.1.min.js" type="text/javascript"></script><script type="text/javascript">    function checkform() {        var name = $.trim($('#<%=txtusername.ClientID %>').val());        var pwd = $.trim($('#<%=txtpwd.ClientID %>').val());        var cpwd = $.trim($('#<%=txtcpwd.ClientID %>').val());        var email = $.trim($('#<%=txtemail.ClientID %>').val());        var question = $.trim($('#<%=txtquestion.ClientID %>').val());        var answer = $.trim($('#<%=txtanswer.ClientID %>').value);        if (name.length == 0||pwd.length==0||cpwd.length==0||email.length==0||question.length==0||answer.length==0) {            alert('请把资料填写完整！');        return false;        }        if (pwd != cpwd) {            alert("两次输入的密码不同，请重新输入！");            return false;        }        var reg = /^[a-zA-Z0-9]{6,20}$/g;        if (!reg.test(pwd)) {            alert("密码长度必须大于6个字符小于20个字符，只能为英语字、数字，例如：snsn2003等。 ");            return false;        }        reg = /\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/g;        if (!reg.test(email)) {            alert("email的格式不正确，请重新输入！ ");            return false;        }        return true;    }</script></asp:Content>

 

实现智能提示：

 

aspx代码：

onblur="checkusername(this.value);"

 

                                        <span class="pad">用 户 名：                                          <asp:TextBox ID="txtusername" onblur="checkusername(this.value);" runat="server"></asp:TextBox>                                            <span id="msg_username">*</span><br />                                            请填写您用来登录的用户名。</span>

js代码：

   if ($.trim(username).length == 0) {            $("#msg_username").html("<img src='image/wrong.gif'><span style='color:red;'>用户名不能为空！<span>");        }        else         {            $("#msg_username").html("<img src='image/right.gif'><span style='color:green;'>用户名可用！<span>");        } 

 （3）使用AJAX验证用户名是否已存在

 

js代码：

 function checkusername(username) {        if ($.trim(username).length == 0) {            $("#msg_username").html("<span style='color:red;'>用户名不能为空！<span>");        }        else         {            var url = "handler/CheckUserName.ashx?username=" + username + "&t=" + new Date().valueOf();            $.get(url, function (data) {                if (data == "false") {                    $("#msg_username").html("<span style='color:red;'>用户名已存在，请重新输入！<span>");                }                else {                    $("#msg_username").html("<span style='color:green;'>用户名可用！<span>");                }            })            }        }

 

CheckUserName.ashx代码：

 

using System;using System.Collections.Generic;using System.Linq;using System.Web;namespace Web.handler{    /// <summary>    /// CheckUserName 的摘要说明    /// </summary>    public class CheckUserName : IHttpHandler    {        public void ProcessRequest(HttpContext context)        {            context.Response.ContentType = "text/plain";            string username=context.Request.QueryString["username"];            if (string.IsNullOrEmpty(username))            {                context.Response.Write("false");                context.Response.End();            }            if (new MyShop.DAL.UserDAO().Exists(username))            {                context.Response.Write("false");                context.Response.End();            }            else            {                context.Response.Write("true");                context.Response.End();            }        }        public bool IsReusable        {            get            {                return false;            }        }    }}

 

同样，可用为其他文本框添加动态提示效果。

 如，验证email

aspx代码

<asp:TextBox ID="txtemail" onblur="checkemail(this.value)" runat="server"></asp:TextBox>                                           <span id="msg_email"> *</span>

js代码：

function checkemail(email) {        if ($.trim(email).length == 0) {            $("#msg_email").html("<span style='color:red;'>email不能为空！<span>");        }        else {            reg = /\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/g;            if (!reg.test(email)) {                $("#msg_email").html("<span style='color:red;'>email格式不正确！<span>");                return false;            }            else {                $("#msg_email").html("<span style='color:green;'>email填写正确！<span>");            }        }    }