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">* 请输入手机收到的验证码。如果一段时间没有收到,请&nbsp;<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("请输入手机收到的验证码,如果一段时间没有收到,请&nbsp;<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;

            }

        }

    }

}
检验验证码是否填写,是否超时,是否输入正确

 

你可能感兴趣的:(Ajax)