基于JavaScript短信验证码如何实现

 更新时间:2016年01月24日 11:46:58   作者:牦牛  
我们在使用移动、电信等运营商网上营业厅的时候,为确保业务的完整和正确性,经常会需要用到短信的验证码。最近因为某省业务需要,也做了个类似的功能

我们在使用移动、电信等运营商网上营业厅的时候,为确保业务的完整和正确性,经常会需要用到短信的验证码。最近因为某省业务需要,也做了个类似的功能。

原理很简单,就是在用户点击"获取验证码"的时候,Ajax获取一串固定位数的数字,然后写数据库发短信,写Cookie设置验证码的有效期。

JS请求验证码如下:

$.ajax({
type: "GET",
url: "../Ajax/smsrandcodetest.ashx?phone=" + phone.val() + "&smsCodeRand=" + num,
success: function(result) {
if (result == "Y") {
alert("验证码已发送至您输入的手机号!有效期5分钟");
RemainTime();
}
else {
alert("验证码获取失败!请重新获取");
}
},
error: function() { alert("error"); }
});
//获取6位随机验证码
function random() {
var num = "";
for (i = 0; i < 6; i++) {
num = num + Math.floor(Math.random() * 10);
}
return num;
}
//验证码有效期倒计时
function RemainTime() {
var iSecond;
var sSecond = "", sTime = "";
if (iTime >= 0) {
iSecond = parseInt(iTime % 300);
if (iSecond >= 0) {
sSecond = iTime + "秒";
}
sTime = "<span style='color:darkorange;font-size:13px;'>" + sSecond + "</span>";
if (iTime == 0) {
clearTimeout(Account);
sTime = "<span style='color:red;font-size:12px;'>验证码已过期</span>";
}
else {
Account = setTimeout("RemainTime()", 1000);
}
iTime = iTime - 1;
}
$("#endtime").html(sTime);
} 

前端要处理的工作基本如上,现在要在HttpHandler中添加逻辑了,为了防止Js生成的验证码不符规则,我们在后端重新生成一次:

if (smscoderand.Length != 6) //如果JS生成的随机码不符,则用C#生成随机码
{
smscoderand = GetRandom();
}
//写短信数据,发SMS
//写Cookie,设置验证码有效期,比如5分钟
//注:如果以上都处理成功,返回"Y",处理失败,返回"N"

这里为了方便,验证码的有效期验证就用Cookie来完成。在业务提交的时候,会获取客户端的这个Cookie,看是否存在,如果不存在肯定就是过期了。如果后续业务扩展可能会考虑加上数据库的有效期验证,以及一些其它的规则,比如一小时、一天内限制发送验证码的条数(总不能让你无限制的发送短信吧) 等等。

以上所述是针对JavaScript短信验证码如何实现的详细介绍,希望对大家有所帮助。

相关文章

  • 使用JS动态构建目录树

    使用JS动态构建目录树

    本文详细讲解了使用JS动态构建目录树的方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-01-01
  • 详解基于DllPlugin和DllReferencePlugin的webpack构建优化

    详解基于DllPlugin和DllReferencePlugin的webpack构建优化

    这篇文章主要介绍了详解基于DllPlugin和DllReferencePlugin的webpack构建优化,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • JS组件系列之Bootstrap table表格组件神器【终结篇】

    JS组件系列之Bootstrap table表格组件神器【终结篇】

    Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据,支持单选,复选框,排序,分页,显示/隐藏列,固定标题滚动表,响应式设计,Ajax加载JSON数据,点击排序的列,卡片视图等。本文给大家介绍JS组件系列之Bootstrap table表格组件神器【终结篇】,一起学习吧
    2016-05-05
  • onkeypress字符按键兼容所有浏览器使用介绍

    onkeypress字符按键兼容所有浏览器使用介绍

    使用onkeypress字符按键兼容所有浏览器,感兴趣的朋友可以参考下,希望对你学习js事件有所帮助
    2013-04-04
  • 微信小程序分包加载代码实现方法详解

    微信小程序分包加载代码实现方法详解

    这篇文章主要介绍了微信小程序分包加载代码实现方法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • 纯JS实现五子棋游戏兼容各浏览器(附源码)

    纯JS实现五子棋游戏兼容各浏览器(附源码)

    纯JS实现五子棋游戏同时兼容各个主流浏览器,感兴趣的朋友可以下载源码学习下也是对你js技巧的晋级
    2013-04-04
  • JS解决ajax无法后退的问题记录

    JS解决ajax无法后退的问题记录

    Ajax请求通常不支持浏览器的后退按钮,因为它们是异步的,不会导致页面重新加载(刷新),但如果你想要用户能够通过浏览器的后退按钮回到之前的页面状态,你可以通过几种方法来解决这个问题,感兴趣的朋友跟随小编一起看看吧
    2024-10-10
  • javascript 子窗体父窗体相互传值方法

    javascript 子窗体父窗体相互传值方法

    javascript 子窗体父窗体相互传值方法,一般都是用window.open函数,下面脚本之家给出具体的代码。
    2010-05-05
  • echarts中tooltip添加点击事件代码示例

    echarts中tooltip添加点击事件代码示例

    这篇文章主要给大家介绍了关于echarts中tooltip添加点击事件的相关资料,echarts tooltip点击事件是指当用户点击图表中的提示框(tooltip)时触发的事件,需要的朋友可以参考下
    2023-07-07
  • JS如何获取指定范围内的随机数含小数

    JS如何获取指定范围内的随机数含小数

    这篇文章主要介绍了JS如何获取指定范围内的随机数含小数问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12

最新评论