Home > Web Front-end > JS Tutorial > body text

How to implement SMS verification code based on JavaScript_javascript skills

WBOY
Release: 2016-05-16 15:18:33
Original
2329 people have browsed it

When we use the online business halls of mobile, telecom and other operators, in order to ensure the integrity and accuracy of the business, we often need to use SMS verification codes. Recently, a similar function was built due to business needs in a certain province.

The principle is very simple, that is, when the user clicks "Get Verification Code", Ajax gets a string of fixed digits, then writes the database to send a text message, and writes a cookie to set the validity period of the verification code.

The JS request verification code is as follows:

$.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);
} 
Copy after login

The work to be processed by the front end is basically the same as above. Now we need to add logic in the HttpHandler. In order to prevent the verification code generated by Js from not complying with the rules, we regenerate it in the back end:

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

For convenience here, the validity period verification of the verification code is completed using Cookie. When the business is submitted, the client's cookie will be obtained to see if it exists. If it does not exist, it must have expired. If the business expands later, you may consider adding database validity verification and some other rules, such as limiting the number of verification codes sent in one hour or one day (you can’t send unlimited text messages), etc.

The above is a detailed introduction on how to implement the JavaScript SMS verification code. I hope it will be helpful to everyone.

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template