C# Ajax 手机发送短信验证码 校验验证码 菜鸟级别实现方法
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了C# Ajax 手机发送短信验证码 校验验证码 菜鸟级别实现方法相关的知识,希望对你有一定的参考价值。
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
以上是关于C# Ajax 手机发送短信验证码 校验验证码 菜鸟级别实现方法的主要内容,如果未能解决你的问题,请参考以下文章
这是一个简单的前台短信验证码功能 ajax实现异步处理 (发送和校验)