C# Ajax 手机发送短信验证码 校验验证码 菜鸟级别实现方法

浏览数：37 / 时间：2015年06月11日

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;
            }
        }
    }
}
检验验证码是否填写，是否超时，是否输入正确

 

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： Android iOS 移动互联 终端开发

相关文章

随机文章

您可能还喜欢

您可能还喜欢