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


Posted in Javascript onJanuary 24, 2016

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

原理很简单,就是在用户点击"获取验证码"的时候,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短信验证码如何实现的详细介绍,希望对大家有所帮助。

Javascript 相关文章推荐
Javascript 面向对象 继承
May 13 Javascript
理解Javascript_06_理解对象的创建过程
Oct 15 Javascript
精心挑选的15个jQuery下拉菜单制作教程
Jun 15 Javascript
javascript实现依次输入input自动定焦
Dec 23 Javascript
jQuery解析json数据实例分析
Nov 24 Javascript
JavaScript禁止用户多次提交的两种方法
Jul 24 Javascript
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
解决Vue打包之后文件路径出错的问题
Mar 06 Javascript
node中IO以及定时器优先级详解
May 10 Javascript
JavaScript进制转换实现方法解析
Jan 18 Javascript
javascript canvas封装动态时钟
Sep 30 Javascript
详解Vue的sync修饰符
May 15 Vue.js
详解JS面向对象编程
Jan 24 #Javascript
js中实现字符串和数组的相互转化详解
Jan 24 #Javascript
JavaScript基础知识之方法汇总结
Jan 24 #Javascript
Javascript实现单例模式
Jan 24 #Javascript
原生JavaScript实现滚动条效果
Mar 24 #Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
Jan 23 #Javascript
jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用
Jan 23 #Javascript
You might like
php 获取可变函数参数的函数
2009/08/26 PHP
php calender(日历)二个版本代码示例(解决2038问题)
2013/12/24 PHP
基于jQuery的树控件实现代码(asp.net+json)
2010/07/11 Javascript
JavaScript中几种常见排序算法小结
2011/02/22 Javascript
js 可拖动列表实现代码
2011/12/13 Javascript
javascript定时变换图片实例代码
2013/03/17 Javascript
nodejs导出excel的方法
2015/06/30 NodeJs
浅谈JS之iframe中的窗口
2016/09/13 Javascript
jQuery Plupload上传插件的使用
2017/04/19 jQuery
AngulaJS路由 ui-router 传参实例
2017/04/28 Javascript
微信小程序支付功能 php后台对接完整代码分享
2018/06/12 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
2019/04/25 Javascript
JS学习笔记之原型链和利用原型实现继承详解
2019/05/29 Javascript
微信小程序实现消息框弹出动画
2020/04/18 Javascript
[03:34]2014DOTA2西雅图国际邀请赛 淘汰赛7月15日TOPPLAY
2014/07/15 DOTA
如何利用Fabric自动化你的任务
2016/10/20 Python
Python+Socket实现基于UDP协议的局域网广播功能示例
2017/08/31 Python
Anaconda下配置python+opencv+contribx的实例讲解
2018/08/06 Python
python django框架中使用FastDFS分布式文件系统的安装方法
2019/06/10 Python
基于Django ORM、一对一、一对多、多对多的全面讲解
2019/07/26 Python
使用Python爬虫库requests发送表单数据和JSON数据
2020/01/25 Python
TensorFLow 变量命名空间实例
2020/02/11 Python
python GUI库图形界面开发之PyQt5中QWebEngineView内嵌网页与Python的数据交互传参详细方法实例
2020/02/26 Python
Python常用外部指令执行代码实例
2020/11/05 Python
python中entry用法讲解
2020/12/04 Python
CSS3轻松实现清新 Loading 效果的简单实例
2016/06/06 HTML / CSS
使用phonegap克隆和删除联系人的实现方法
2017/03/31 HTML / CSS
HTML5超文本标记语言的实现方法
2020/09/24 HTML / CSS
意大利灯具购物网站:Lampade.it
2018/10/18 全球购物
大学生职业规划范文:象牙塔生活的四年计划
2014/01/14 职场文书
热门专业求职信
2014/05/24 职场文书
体操比赛口号
2014/06/10 职场文书
社会治安综合治理责任书
2015/01/29 职场文书
关于召开会议的通知
2015/04/15 职场文书
会议开幕致辞怎么写
2016/03/03 职场文书
详解python网络进程
2021/06/15 Python