Home >Web Front-end >JS Tutorial >How to implement SMS verification code based on JavaScript_javascript skills
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); }
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"
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.