1.Ajax請求處理頁面：
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.SessionState; using System.Web.Services; namespace Web.User.Ajax { /// <summary> /// SendCheckcode 的摘要說明 /// </summary> [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] public class SendCheckcode : IHttpHandler, IRequiresSessionState { //發送驗證碼 public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string arrMobile = context.Request.Form["ajaxdata"].ToString(); string[] strMobile = arrMobile.Split(','); string yzm = new Random().Next(999999).ToString(); context.Session["MobileYzm"] = yzm; //如果是手機號登錄 string strReg = @"^((\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$)"; bool IsMobile = BLL.HSSM_Public.PublicRegex(strReg, arrMobile); bool b = false; if (IsMobile) b = BLL.HSSM_Public.SendSMS(strMobile, yzm); else { Model.EmailTabModel etm = new Model.EmailTabModel(); etm.Email = arrMobile; b = BLL.HSSM_Public.SendEmail(etm, "", 919068484,"郵箱注冊驗證碼","當前注冊驗證碼為：["+yzm+"]", 0);//發送郵件 } if (b) context.Response.Write("0"); else context.Response.Write("發送失敗！"); } public bool IsReusable { get { return false; } } } }
2.填寫手機號和驗證碼：
<div class="Con"> <ul> <li class="left">輸入手機號碼：</li><li class="right"> <input id="txtMobile" runat="server" type="text" class="Text"/><input id="btnGetYzm" runat="server" type="button" class="hyzm" value="獲取驗證碼" /> </li> </ul> <ul> <li class="left">驗證碼：</li><li class="right"> <input id="txtChkCode" runat="server" type="text" class="Text"/></li> <li id="liCheckCode" runat="server" class="ts">* 請輸入手機收到的驗證碼。如果一段時間沒有收到，請 <a id="aGetChkCodeAgain" style="cursor: pointer;" class="a1">重新獲取</a></li> </ul> </div>
3.發送驗證碼：
$(function () { $("#btnGetYzm,#aGetChkCodeAgain").bind("click", function () { if (mobileResult == true) { /****************************發送驗證碼到手機************************/ $.ajax({ type: "POST", url: "../User/Ajax/SendCheckcode.ashx?r=" + Math.random(), data: { ajaxdata: $("#txtMobile").val() }, async: false, success: function (msg) { if (msg != 0) { $("#liCheckCode").html(msg); $("#liCheckCode").css("color", "red"); result = false; } else { $("#liCheckCode").html("手機號驗證通過"); $("#liCheckCode").css("color", "green"); result = true; } }, error: function (xhr) { $("#liCheckCode").html("Error:" + xhr.status + " " + xhr.statusText); $("#liCheckCode").css("color", "red"); result = false; } }); /****************************end************************/ count = 30; GetYzm(); return true; } else { //手機號驗證 VerifyCheck($("#txtMobile"), $("#liCheckCode"), "請輸入正確的手機號！", /^((\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$)/, "手機號不合法！", "../User/Ajax/ExistsMobile.ashx"); return false; } });
4.驗證手機號和驗證碼：
var result = false; var mobileResult = false; var retMobile = false; //手機號驗證是否通過 var retChkCode = false; //填寫的手機接收的驗證碼是否通過 //表單元素驗證,txt:要驗證的文本值；div:文本驗證信息層；divmsg：文本驗證消息； //reg：正則式；regmsg：正則式驗證消息；ajaxurl：文本值有效性請求驗證頁面；divhtml：驗證返回消息 function VerifyCheck(txt, div, divmsg, reg, regmsg, ajaxurl) { if ($.trim(txt.val()) == "") {//判斷文本框是否填寫 div.html(divmsg); div.css("color", "red"); return false; } else { if (reg != null && !reg.test(txt.val())) {//判斷是否輸入合法字符 div.html(regmsg); div.css("color", "red"); return false; } else { /****************************檢查文本輸入值是否可用************************/ $.ajax({ type: "POST", url: ajaxurl + "?r=" + Math.random(), data: { ajaxdata: txt.val() }, async: false, success: function (msg) { if (msg != 0) { div.html(msg); div.css("color", "red"); result = false; } else { div.css("color", "green"); if (divmsg == "請輸入正確的手機號！") { mobileResult = true; } if (ajaxurl == "../User/Ajax/ExistsMobile.ashx") { div.html("手機號輸入正確"); retMobile = true; } if (ajaxurl == "../User/Ajax/ExistsMobileYzm.ashx") { div.html("驗證碼輸入正確"); retChkCode = true; } result = true; } }, error: function (xhr) { div.html("Error:" + xhr.status + " " + xhr.statusText); div.css("color", "red"); result = false; } }); return result; /****************************end************************/ } } } //設置發送驗證碼的按鈕的倒計時效果 var count = 30; function GetYzm() { $("#btnGetYzm").attr("disabled", "disabled"); $("#btnGetYzm").val(count + "秒之后重新獲取") count--; if (count > 0) { setTimeout(GetYzm, 1000); } else { $("#btnGetYzm").val("獲取驗證碼"); $("#btnGetYzm").attr("disabled", false); } return result; }
4.判斷手機號格式(是否合法，是否可用)：
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace Web.User.Ajax { /// <summary> /// ExistsMobile 的摘要說明 /// </summary> public class ExistsMobile : IHttpHandler { //檢測手機號是否已經注冊 public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string Mobile = string.Empty; if (context.Request.Form["ajaxdata"] == null) { context.Response.Write("手機號不能為空！"); return; } Mobile = context.Request.Form["ajaxdata"].ToString(); if (!BLL.HSSM_Public.PublicRegex(@"^((\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$)", Mobile)) { context.Response.Write("手機號格式非法！"); return; } if (BLL.HSSM_Public_DB.IsRecord("Users", string.Format(" Mobile='{0}'", Mobile))) { context.Response.Write("該手機號["+Mobile+"]已被注冊！"); } else { context.Response.Write("0"); } } public bool IsReusable { get { return false; } } } }
5.判斷驗證碼格式：
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.SessionState; using System.Web.Services; namespace Web.User.Ajax { /// <summary> /// ExistsMobileYzm 的摘要說明 /// </summary> [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] public class ExistsMobileYzm : IHttpHandler, IRequiresSessionState //就是這樣顯示的實現一下，不用實現什么方法 { /// <summary> /// 檢測驗證碼是否輸入正確 /// </summary> /// <param name="context"></param> public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string CheckCode = string.Empty; string SessionCheckcode = null != context.Session["MobileYzm"] ? context.Session["MobileYzm"].ToString() : string.Empty; if (String.IsNullOrEmpty(SessionCheckcode)) { context.Response.Write("請您先獲取驗證碼！"); return; } if (context.Request.Form["ajaxdata"] == null) { context.Response.Write("請輸入手機收到的驗證碼，如果一段時間沒有收到，請 <a id='aGetChkCodeAgain' href='#' class='a1'>重新獲取</a>"); return; } CheckCode = context.Request.Form["ajaxdata"].ToString(); if (String.IsNullOrEmpty(SessionCheckcode)) context.Response.Write("驗證碼超時失效！"); else if (CheckCode != SessionCheckcode) context.Response.Write("驗證碼輸入錯誤！"); else context.Response.Write("0"); } public bool IsReusable { get { return false; } } } }