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

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

 

转载原文:http://www.cnblogs.com/gawking/p/3518815.html

以上是关于C# Ajax 手机发送短信验证码 校验验证码 菜鸟级别实现方法的主要内容,如果未能解决你的问题,请参考以下文章

短信验证码发送校验类 Redis+php

这是一个简单的前台短信验证码功能 ajax实现异步处理 (发送和校验)

Spring Security--短信验证码详解

web前端怎么开发短信验证功能

js实现输入手机验证码后点击提交按钮验证手机输入的验证码和发送的验证码是不是一致

防止验证码的恶意发送