基于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 add event remove event
Apr 07 Javascript
javascript document.referrer 用法
Apr 30 Javascript
优化javascript的执行速度
Jan 23 Javascript
javascript中的new使用
Mar 20 Javascript
js获取当月最后一天实例代码
Nov 19 Javascript
XMLHttpRequest处理xml格式的返回数据(示例代码)
Nov 21 Javascript
jQuery表单美化插件jqTransform使用详解
Apr 12 Javascript
微信小程序 数据封装,参数传值等经验分享
Jan 09 Javascript
JavaScript利用闭包实现模块化
Jan 13 Javascript
vue生成随机验证码的示例代码
Sep 29 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
Oct 11 Javascript
jquery实现抽奖功能
Oct 22 jQuery
详解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
同时提取多条新闻中的文本一例
2006/10/09 PHP
允许phpmyadmin空密码登录的配置方法
2011/05/29 PHP
从零开始学YII2框架(一)通过Composer安装Yii2框架
2014/08/20 PHP
php截取字符串函数分享
2015/02/02 PHP
php实现字符串反转输出的方法
2015/03/14 PHP
详解PHP中的Traits
2015/07/29 PHP
php生成静态html页面的方法(2种方法)
2015/09/14 PHP
PHP后台备份MySQL数据库的源码实例
2019/03/18 PHP
js TextArea的选中区域处理
2010/12/28 Javascript
JavaScript中的null和undefined区别介绍
2015/01/01 Javascript
JavaScript中的Math.sin()方法使用详解
2015/06/15 Javascript
jquery实现滑动特效代码
2015/08/10 Javascript
JS Ajax请求如何防止重复提交
2016/06/13 Javascript
浅谈js数组和splice的用法
2016/12/04 Javascript
React学习笔记之列表渲染示例详解
2017/08/22 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
2017/11/24 Javascript
微信小程序实现复选框效果
2018/12/28 Javascript
微信小程序自定义波浪组件使用方法详解
2019/09/21 Javascript
JavaScript实现页面高亮操作提示和蒙板
2021/01/04 Javascript
使用Python下载Bing图片(代码)
2013/11/07 Python
python中使用urllib2伪造HTTP报头的2个方法
2014/07/07 Python
Python实现截屏的函数
2015/07/26 Python
Python实用技巧之利用元组代替字典并为元组元素命名
2018/07/11 Python
python实现剪切功能
2019/01/23 Python
Django实现学生管理系统
2019/02/26 Python
HTML5输入框下拉菜单功能的示例代码
2020/09/08 HTML / CSS
澳大利亚最大的网上油画销售画廊:Direct Art Australia
2018/04/15 全球购物
洲际酒店集团英国官网:IHG英国
2019/07/10 全球购物
科研先进个人典型材料
2014/01/31 职场文书
餐饮服务员岗位职责
2015/02/09 职场文书
2015年司机年终工作总结
2015/05/14 职场文书
2015领导干部廉洁自律工作总结
2015/07/23 职场文书
浅谈如何写好演讲稿?
2019/06/12 职场文书
68句权威创业名言
2019/08/26 职场文书
golang中实现给gif、png、jpeg图片添加文字水印
2021/04/26 Golang
疑《守望先锋2》A测截图泄露 或将推出新模式、新界面
2022/04/03 其他游戏