由於工作需要,對方要求me做個模塊或者其他實體東西,於是就選擇了大家經常用到的用戶註冊模塊,廢話不多說先看效果圖,沒有經過任何美工處理,效果一般,效果圖:
在設計註冊模塊之前需要先知道此模塊的工作流程,即各個控件的用途,比如使用驗證控件,電話號碼的驗證需要正則表達式,郵箱也是,主要還是控件與SQL的交互。
html代碼:
<head runat="server"> <title>新用戶註冊</title> <style type="text/css"> .style1 { text-align: center; width: 870px; margin-left: 47px; } .style2 { font-size: 8pt; } .style3 { font-size: 5pt; } </style> </head> <body> <form id="form1" runat="server" action="index.aspx"> <div class="style1"> 用戶註冊 <hr style="width:50%; color:blue"/> <table align="center"> <tr><td> 會員姓名:<asp:TextBox ID="txtName" runat="server" ToolTip="字母、下劃線、數字" ontextchanged="txtName_TextChanged"></asp:TextBox> </td> <td> <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtName" Display="Dynamic" ErrorMessage="會員姓名不能爲空"></asp:RequiredFieldValidator> </td> <td> <asp:Label ID="lblMZ" runat="server"></asp:Label></td> <td><asp:Label ID="lblZC" runat="server"></asp:Label></td> </tr> <tr> <td> 密碼: <asp:TextBox ID="txtPwd" runat="server" TextMode="Password"></asp:TextBox> </td> <td> <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtPwd" Display="Dynamic" ErrorMessage="密碼不能爲空,建議大於6位數"></asp:RequiredFieldValidator> </td> </tr> <tr> <td> 確認密碼:<asp:TextBox ID="txtPwdOk" runat="server" TextMode="Password"></asp:TextBox> </td> <td> <asp:CompareValidator ID="CompareValidator1" runat="server" ControlToCompare="txtPwd" ControlToValidate="txtPwdOk" Display="Dynamic" ErrorMessage="密碼不相同,請重新輸入"></asp:CompareValidator> </td> </tr> <tr> <td> 暱稱: <asp:TextBox ID="txtNick" runat="server"></asp:TextBox> </td> </tr> <tr> <td> 性別: <asp:RadioButton ID="rdiobtnM" runat="server" GroupName="sex" Text="男" /> <asp:RadioButton ID="rdobtnW" runat="server" GroupName="sex" Text="女" /> </td> </tr> <tr> <td> 電話: <asp:TextBox ID="txtPhone" runat="server"></asp:TextBox> </td> <td> <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="txtPhone" Display="Dynamic" ErrorMessage="請正確輸入手機或固話" ValidationExpression="\d{11}|(\d{3,4}-)?\d{7,8}"></asp:RegularExpressionValidator> </td> </tr> <tr> <td> 郵箱: <asp:TextBox ID="txtMail" runat="server"></asp:TextBox> </td> <td> <asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server" ControlToValidate="txtMail" ErrorMessage="請正確輸入郵箱地址" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator> </td> </tr> <tr> <td> 所在城市:<asp:TextBox ID="txtCity" runat="server" ></asp:TextBox> </td> </tr> <tr> <td style="font-size: 5pt"> <asp:Button ID="btnZhuCe" runat="server" Text="註冊" οnclick="btnZhuCe_Click" /> <asp:Button ID="btnQuXiao" runat="server" Text="取消" οnclick="btnQuXiao_Click" /> </td> <td> </td> </tr> <tr><td><span class="style2"><a href="index.aspx">所有已註冊用戶</a> </span> <span class="style3"><a href="changeinfo.aspx" style="font-size: 8pt">修改個人信息</a></span></td></tr> </table> </div> </form> </body> </html>
在用戶註冊頁面需要判斷用戶輸入的是否爲空,還要判斷用戶時候已經註冊過,用戶的輸入的用戶名格式是否合法。該功能用TextChanged來實現,調用isnamefomrmar方法判斷用戶輸入的用戶名是否正確,最後調用isname方法判斷用戶名是否已經存在,並給出相應的提示,實現的代碼如下:
protected void txtName_TextChanged(object sender, EventArgs e) { //判斷用戶名是否爲空 if (txtName.Text == " ") { //給出提示信息 ClientScript.RegisterStartupScript(this.GetType(), " ", "<script>alert('用戶名不能爲空!')</script>"); } else { //判斷用戶名是否符合正則表達式 if (isNameFormar()) { //判斷用戶是否已註冊 if (isName()) { lblZC.Text = " "; } else { lblZC.Text = "用戶可以註冊"; } } else {//用戶名不符合正則表達式,則把清空 txtName.Text = " "; } }
自定義方法isnameformar用來判斷用戶輸入的格式是否正確,會員輸入的格式是指用戶名只能包含數字,字母及下劃線,主要通過regex的ismatch方法實現,看是否滿足正則表達式,然後返回布爾值,實現的代碼如下:
protected bool isNameFormar() { //定義個布爾型的變量,初始爲false bool blNameFormar = false; //設置正則表達式 Regex re = new Regex("^[a-zA-Z0-9_]{3,16}$"); //用IsMatch方法判斷用戶輸入信息是否合法 if (re.IsMatch(txtName.Text)) { //設置布爾值爲true blNameFormar = true; this.lblMZ.ForeColor = System.Drawing.Color.Black; } else { //設置布爾值爲false blNameFormar = false; lblMZ.Text = "用戶格式不正確"; ClientScript.RegisterStartupScript(this.GetType(), "", "<script>alert('用戶名格式不正確!')</script>"); lblMZ.ForeColor = System.Drawing.Color.Red; } //返回布爾值 return blNameFormar; }
自定義方法isname來判斷用戶輸入的用戶名是否已經存在,可通過SQL語句實現,如果已存在返回布爾值true,否則返回false,實現代碼如下:
protected bool isName() { //定義個布爾型的變量,初始爲false bool blisname = false; //定義SQL語句,實現查詢功能 string sqlSel = "select count(*) from userInfo where userName='" + txtName.Text + "'"; //創建數據庫連接 SqlConnection con = new SqlConnection("server=.;database=login;uid=sa;pwd=szl;"); //創建SqlCommand對象com SqlCommand com = new SqlCommand(sqlSel, con); //打開數據庫連接 con.Open(); //判斷查詢結果中第一行的第一列是否存在 if (Convert.ToInt32(com.ExecuteScalar()) > 0) { //存在,返回爲true blisname = true ; } else { //不存在,返回爲false blisname =false ; } //關閉數據庫連接 con.Close(); //返回布爾值 return blisname; }
在“註冊”按鈕單擊事件中,先判斷用戶名是否已經存在,和格式是否正確,在滿足這兩個條件的基礎上,在把用戶的信息添加到數據庫中,主要通過insert語句實現,爲了提高保密性,我們對密碼進行了加密,使用MD5加密方式,代碼實現如下:
protected void btnZhuCe_Click(object sender, EventArgs e) { //調用isNameFormar自定義方法判斷用戶名輸入的是否滿足要求 if (isNameFormar()) { //調用自定義isName方法判斷用戶名是否已存在 if (isName()) { //用lable控件顯示提示信息 lblMZ.Text = "用戶已存在"; lblMZ.ForeColor = System.Drawing.Color.Red;//設置字體演示 } else { //獲取用戶填寫的會員名 string userName = txtName.Text; //獲取用戶填寫的密碼並進行加密 string userPass = FormsAuthentication.HashPasswordForStoringInConfigFile(txtPwd.Text, "MD5"); //獲取用戶填寫的暱稱名稱 string nickName = txtNick.Text; //獲取用戶性別 string sex = ""; if (rdiobtnM.Text=="男") { sex = "男"; } else { sex = "女"; } //獲取用戶電話 string phone = txtPhone.Text; //獲取用戶輸入城市名 string city = txtCity.Text; //獲取用戶輸入的e_mail string email = txtMail.Text; //定義一個SQL語句,實現用戶信息的添加 string sqlIns = "insert into userInfo(userName,userPass,nickName,sex,phone,email,city) values ('" + userName + "','" + userPass + "','" + nickName + "','" + sex + "','" + phone + "','" + email + "','" + city + "')"; //創建數據庫連接 SqlConnection con = new SqlConnection("server=.;database=login;uid=sa;pwd=szl;"); //打開數據庫連接 con.Open(); //定義命令對象 SqlCommand com = new SqlCommand(sqlIns, con); //判斷受影響的行數,大於0,證明添加成功,反之不成功 if (com.ExecuteNonQuery()>0) { ClientScript.RegisterStartupScript(this.GetType(),"", "<script>alert('註冊成功!')</script>"); //清空文本框中的信息 txtName.Text = txtNick.Text = txtPhone.Text = txtMail.Text = txtCity.Text = ""; lblMZ.Text = ""; Response.Redirect(""); } else { ClientScript.RegisterStartupScript(this.GetType(), "", "<script>alert('請正確填寫信息!')</script>"); } con.Close(); } } else { ClientScript.RegisterStartupScript(this.GetType(), "", "<script>alert('請正確填寫信息!')</script>"); } }