1. 程式人生 > >常用網站後臺與前臺表單的有效性複雜驗證(net+jqury+ajax)不用驗證控制元件方法

常用網站後臺與前臺表單的有效性複雜驗證(net+jqury+ajax)不用驗證控制元件方法

後臺CS頁面 使用者名稱是否存在自寫資料庫查詢方法


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 xh.shop.web { public partial class reg2 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void Button4_Click(object sender, EventArgs e) { } //重置 protected void Button5_Click(object sender, EventArgs e) { txtanswer.Text = ""; txtemail.Text = ""; txtname.Text = ""; txtpwd.Text = ""; txtqrpwd.Text = ""; txtquestion.Text = ""; } //返回 protected void Button6_Click(object sender, EventArgs e) { Response.Redirect("index.aspx"); } //註冊 protected void butcz(object sender, EventArgs e) { //----------------------------------------------------驗證開始 string answer = txtanswer.Text.Trim(); string email= txtemail.Text.Trim(); string name = txtname.Text.Trim(); string pwd = txtpwd.Text.Trim(); string qrpwd = txtqrpwd.Text.Trim(); string question = txtquestion.Text.Trim(); //驗證輸入是否完整 if (answer.Length==0||email.Length==0||name.Length==0||pwd.Length==0||qrpwd.Length==0||question.Length==0) { Response.Write("<script language='JavaScript'>alert('輸入不完整')</script>"); return; } //驗證密碼與確認密碼是否一致 if (pwd!=qrpwd) { Response.Write("<script language='JavaScript'>alert('密碼與確認密碼不一致')</script>"); return; } //驗證密碼 if (!Regex.IsMatch(pwd,"^[a-zA-Z0-9]{6,20}$")) { Response.Write("<script language='JavaScript'>alert(' 密碼長度必須大於6個字元小於20個字元,只能為英語字、數字,例如:snsn2003等')</script>"); return; } //驗證電子郵件 if (!Regex.IsMatch(email, @"\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*")) { Response.Write("<script language='JavaScript'>alert('請輸入有效的郵件地址')</script>"); return; } //驗證使用者名稱是否存在 if (new xh.shop.DAL.user().Exists(name)) { Response.Write("<script language='JavaScript'>alert('使用者名稱已經存在')</script>"); return; } //--------------------------------------------------------驗證結束 int res= new xh.shop.DAL.user().Add(new xh.shop.Model.user() { username=name, createdate=DateTime.Now, answer=answer, email=email, password=pwd, question=question }); if (res > 0) { Response.Write("<script language='JavaScript'>alert('新增成功')</script>"); txtanswer.Text = ""; txtemail.Text = ""; txtname.Text = ""; txtpwd.Text = ""; txtqrpwd.Text = ""; txtquestion.Text = ""; } else { Response.Write("<script language='JavaScript'>alert('新增失敗')</script>"); return; } } } }

前臺頁面 images資料夾下用到了gou.gif顯示輸入正確 jqur1.4.2

複製程式碼

<%@ Page Title="" Language="C#" MasterPageFile="~/topfoot.Master" AutoEventWireup="true" CodeBehind="reg2.aspx.cs" Inherits="xh.shop.web.reg2" %> <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> <script src="js/jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> function checkform() { var name = $.trim($('#<%=txtname.ClientID %>').val()); var email = $.trim($('#<%=txtemail.ClientID %>').val()); var pwd = $.trim($('#<%=txtpwd.ClientID %>').val()); var qrpwd = $.trim($('#<%=txtqrpwd.ClientID %>').val()); var question = $.trim($('#<%=txtquestion.ClientID %>').val()); var answer = $.trim($('#<%=txtanswer.ClientID %>').val()); //驗證輸入是否完整 if (answer.length == 0 || email.length == 0 || name.length == 0 || pwd.length == 0 || qrpwd.length == 0 || question.length == 0) { alert("輸入不完整"); return false; } //驗證密碼與確認密碼是否一致 if (pwd != qrpwd) { alert("密碼與確認密碼不一致"); return false; } //驗證密碼 這裡的正則表示式的判斷方法跟c#不一樣 請注意:/正則表示式 /g g表示全部查詢 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("請輸入有效的郵件地址"); return false; } //如果都正確 則返回真 return true; } //驗證使用者名稱失去焦點時是否存在使用者名稱 function checkname(username) { username = $.trim(username); if (username.length == 0) { $("#meusername").html("<span style='color:red;'>使用者名稱不能為空</span>"); return; } else { var url = "handler/checkusername.ashx?username=" + username + "&t=" + new Date().valueOf(); $.get(url, function(data) { if (data == "false") { $("#meusername").html("<span style='color:red;'>使用者名稱已經存在</span>"); } else { $("#meusername").html("<img src=images/gou.gif></a>"); } }) } } //驗證電子郵件失去焦點時是否合法 function checkemail(email) { if (email.length == 0) { $("#mecemail").html("<span style='color:red;'>電子郵件不能為空</span>"); return; } else { reg = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/g; if (!reg.test(email)) { $("#mecemail").html("<span style='color:red;'>請輸入有效的郵件地址</span>"); return; } else { $("#mecemail").html("<img src=images/gou.gif></a>"); } } } //驗證密碼確認是否一致 function checkqrpwd(qrpwd) { var pwd = $.trim($('#<%=txtpwd.ClientID %>').val()); if (pwd.length != 0) { if (qrpwd != pwd) { $("#mecqrpwd").html("<span style='color:red;'>確認密碼不一致</span>"); return; } else { $("#mecqrpwd").html("<img src=images/gou.gif></a>"); } } } //驗證密碼輸入合法行和與確認密碼是否一致 function checkpwd(pwd) { var qrpwd = $.trim($('#<%=txtqrpwd.ClientID %>').val()); if (pwd.length == 0) { $("#mecpwd").html("<span style='color:red;'>密碼不能為空</span>"); return false; } var reg = /^[a-zA-Z0-9]{6,20}$/g; if (!reg.test(pwd)) { $("#mecpwd").html("<span style='color:red;'>密碼長度必須大於6個字元小於20個字元,只能為英語字母或者數字</span>"); return false; } else { $("#mecpwd").html("<img src=images/gou.gif></a>"); } } //驗證提示問題 function checkquestion(question) { if (question.length != 0) { $("#mecquestion").html("<img src=images/gou.gif></a>"); } else { $("#mecquestion").html("<span style='color:red;'>確認密碼不一致</span>"); } } //驗證問題答案 function checkanswer(answer) { if (answer.length != 0) { $("#mecanswer").html("<img src=images/gou.gif></a>"); } else { $("#mecanswer").html("<span style='color:red;'>確認密碼不一致</span>"); } } </script> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> <table width="789" border="1"> <tr> <td align="left" valign="top"> <table width="100%" border="0"> <tr> <td height="35" bgcolor="#CCCCCC" style="font-weight: bold; padding-left: 10px;"> <img src="images/o.gif" width="9" height="9" /> 新使用者註冊 </td> </tr> <tr> <td align="left"> <table align="center" border="0" cellpadding="1" cellspacing="1" width="70%"> <tr> <td> <span class="pad">用 戶 名:&nbsp; <asp:TextBox ID="txtname" runat="server" onblur="checkname(this.value);"></asp:TextBox> <span id="meusername">*</span><br /> 請填寫您用來登入的使用者名稱。</span> </td> </tr> <tr> <td> <span class="pad">電子郵件: <asp:TextBox ID="txtemail" runat="server" onblur="checkemail(this.value);"></asp:TextBox> <span id="mecemail">*</span><br /> <br /> </span> </td> </tr> <tr> <td> <span class="pad">密 碼: <asp:TextBox ID="txtpwd" TextMode="Password" runat="server" onblur="checkpwd(this.value);"></asp:TextBox> <span id="mecpwd">*</span><br /> <br /> 長度必須大於6個字元小於20個字元,只能為英語字、數字,例如:snsn2003等。</span> </td> </tr> <tr> <td height="35"> <span class="pad">確認密碼: <asp:TextBox ID="txtqrpwd" TextMode="Password" runat="server" onblur="checkqrpwd(this.value);"></asp:TextBox> <span id="mecqrpwd">*</span><br /> <br /> 請將輸入的密碼再次輸入,以免設定密碼出錯。 </span> </td> </tr> <tr> <td> <span class="pad">密碼提問: <asp:TextBox ID="txtquestion" runat="server" onblur="checkquestion(this.value);"></asp:TextBox> <span id="mecquestion">*</span><br /> (用於密碼遺忘時使用) </span> </td> </tr> <tr> <td> <span class="pad">密碼答案: <asp:TextBox ID="txtanswer" runat="server" onblur="checkanswer(this.value);"></asp:TextBox> <span id="mecanswer">*</span><br /> (密碼遺忘時將驗證此答案) </span> </td> </tr> <tr> <td> <span class="pad"> <asp:Button ID="butsubmit" runat="server" OnClientClick="return checkform()" Text="提交" OnClick="butcz" />&nbsp;<asp:Button ID="Button5" runat="server" Text="重置" OnClick="Button5_Click" />&nbsp; <asp:Button ID="Button6" runat="server" Text="返回" OnClick="Button6_Click" /> &nbsp;(帶*為必填項) </span> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </asp:Content>

複製程式碼

在headler資料夾下建立的checkusername.ashx頁面

複製程式碼

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