C# Ajax 手機發送短信驗證碼 校驗驗證碼 菜鳥級別實現方法

時間  2019-11-29
標籤 c# ajax 手機 發送 短信 驗證碼 校驗 菜鳥 級別 實現 方法 欄目 C# 简体版
原文   原文鏈接

1.Ajax請求處理頁面：css

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.填寫手機號和驗證碼：html

<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.發送驗證碼：ajax

$(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.驗證手機號和驗證碼：dom

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.判斷手機號格式(是否合法，是否可用)：async

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.判斷驗證碼格式：ui

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;
            }
        }
    }
}

檢驗驗證碼是否填寫，是否超時，是否輸入正確url

 

轉載原文：http://www.cnblogs.com/gawking/p/3518815.htmlspa

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程