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; } } } }
接收通过Jquery的Ajax请求传来的参数,进行处理,此处是接收手机号码还是邮箱地址,然后向这个手机号码或邮箱地址发送短信或邮件验证码
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; } });
页面加载时设置点击"发送验证码"按钮请求Ajax页面,Ajax页面生成验证码发送到手机端,发送之后设置按钮文字时间倒计时效果,如果手机号验证未通过将继续验证,验证通过后才能发送
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; }
请求Ajax页面验证手机号和验证码是否输入正确
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; } } } }
检验验证码是否填写,是否超时,是否输入正确
转载原文:http://www.cnblogs.com/gawking/p/3518815.html
时间: 2024-10-16 06:43:18