项目前端页面实例
第1步：登录阿里大于控制台
https://www.alidayu.com/center/user/account?spm=0.0.0.0.P1K1jG
第2步：创建应用
第3步：配置短信签名
第4步：配置短信模板
第5步：前端
|
<tr class="margin-top"> <td class="padding-top text-center">手机号</td> <td><input type="text" class="inputs" id="Phone" name="Phone"> </td> <td><input type="button" value="获取验证码" id="sms" onclick="sendemail()"></td> </tr> <tr> <td class="padding-top text-center">验证码</td> <td><input type="text" class="inputs" id="Code" name="Code"></td> </tr> |
第6步：js处理
|
$(function () { $("#sms").click(function () { sendCode($("#sms")); }); v = getCookieValue("secondsremained");//获取cookie值 if (v > 0) { settime($("#sms"));//开始倒计时 } }) //发送验证码 function sendCode(obj) { var phoneNumber = $("#Phone").val(); var result = isPhoneNum(phoneNumber); if (result) { //将手机利用ajax提交到后台的发短信接口 $.post("/College/Code", { Phone: phoneNumber }, function (data) { if (data == "ok") { alert("验证码发送成功!"); } else { alert("验证码发送失败,请重新发送!"); } }); addCookie("secondsremained", 60, 60);//添加cookie记录,有效时间60s settime(obj); //开始倒计时 } } //开始倒计时 var countdown; function settime(obj) { countdown = getCookieValue("secondsremained"); if (countdown == 0) { obj.removeAttr("disabled"); obj.val("获取验证码"); return; } else { obj.attr("disabled", true); obj.val("重新发送(" + countdown + ")"); countdown--; editCookie("secondsremained", countdown, countdown + 1); } setTimeout(function () { settime(obj) }, 1000) //每1000毫秒执行一次 } //校验手机号是否合法 function isPhoneNum(phoneNumber) { var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/; if (!myreg.test(phoneNumber)) { alert(‘请输入有效的手机号码！‘); return false; } else { return true; } } //发送验证码时添加cookie function addCookie(name, value, expiresHours) { var cookieString = name + "=" + escape(value); //判断是否设置过期时间,0代表关闭浏览器时失效 if (expiresHours > 0) { var date = new Date(); date.setTime(date.getTime() + expiresHours * 1000); cookieString = cookieString + ";expires=" + date.toUTCString(); } document.cookie = cookieString; } //修改cookie的值 function editCookie(name, value, expiresHours) { var cookieString = name + "=" + escape(value); if (expiresHours > 0) { var date = new Date(); date.setTime(date.getTime() + expiresHours * 1000); //单位是毫秒 cookieString = cookieString + ";expires=" + date.toGMTString(); } document.cookie = cookieString; } //根据名字获取cookie的值 function getCookieValue(name) { var strCookie = document.cookie; var arrCookie = strCookie.split("; "); for (var i = 0; i < arrCookie.length; i++) { var arr = arrCookie[i].split("="); if (arr[0] == name) { return unescape(arr[1]); break; } else { return ""; break; } } } |
第7步：后台控制器处理
|
#region 商学院报名发送验证码 public ActionResult ValidateCode() { string Code = GetRandomString(6); string url = "https://eco.taobao.com/router/rest"; string appkey = "****"; //此处填写你自己的 string secret = "****"; //此处填写你自己的 ITopClient client = new DefaultTopClient(url, appkey, secret); AlibabaAliqinFcSmsNumSendRequest req = new AlibabaAliqinFcSmsNumSendRequest(); req.Extend = ""; //可空，返回状态 req.SmsType = "normal"; //不可更改 req.SmsFreeSignName = "个人小站"; //申请的短信签名，不可填写与申请的不一 req.SmsParam = "{VCode:‘" + Code + "‘}"; //模板内参数必填 req.RecNum = Request["Phone"]; //接收者手机号码 req.SmsTemplateCode = "SMS_74235011"; //短信模板的编号，不可出错 AlibabaAliqinFcSmsNumSendResponse rsp = client.Execute(req); if (rsp.IsError == false) { Console.WriteLine(rsp.Body); //return Content(rsp.Body); } //将验证码设置缓存 var CodeInfo = (Object)Code; CacheOpt.SetCache("Code", CodeInfo, Convert.ToInt32(60)); return Content("ok"); } #region 生成6位验证码 public string GetRandomString(int iLength) { string buffer = "0123456789"; // 随机字符中也可以为汉字（任何） StringBuilder sb = new StringBuilder(); Random r = new Random(); int range = buffer.Length; for (int i = 0; i < iLength; i++) { sb.Append(buffer.Substring(r.Next(range), 1)); } return sb.ToString(); } #endregion |
第8步:缓存处理
|
public class CacheOpt { /// <summary> /// 设置缓存 /// </summary> /// <param name="CacheKey"></param> /// <param name="objObject"></param> /// <param name="Seconds">超过多少秒后过期</param> public static void SetCache(string CacheKey, object objObject, long Seconds) { System.Web.Caching.Cache objCache = HttpRuntime.Cache; objCache.Insert(CacheKey, objObject, null, System.DateTime.Now.AddSeconds(Seconds), TimeSpan.Zero); } /// <summary> /// 获取数据缓存 /// </summary> /// <param name="CacheKey">键</param> public static object GetCache(string CacheKey) { System.Web.Caching.Cache objCache = HttpRuntime.Cache; return objCache[CacheKey]; } } |
|
public class CacheOpt { /// <summary> /// 设置缓存 /// </summary> /// <param name="CacheKey"></param> /// <param name="objObject"></param> /// <param name="Seconds">超过多少秒后过期</param> public static void SetCache(string CacheKey, object objObject, long Seconds) { System.Web.Caching.Cache objCache = HttpRuntime.Cache; objCache.Insert(CacheKey, objObject, null, System.DateTime.Now.AddSeconds(Seconds), TimeSpan.Zero); } /// <summary> /// 获取数据缓存 /// </summary> /// <param name="CacheKey">键</param> public static object GetCache(string CacheKey) { System.Web.Caching.Cache objCache = HttpRuntime.Cache; return objCache[CacheKey]; } } |
注：完整版项目地址：http://www.gmkcn.com/