基于JavaScript短信驗(yàn)證碼如何實(shí)現(xiàn)
我們?cè)谑褂靡苿?dòng)、電信等運(yùn)營(yíng)商網(wǎng)上營(yíng)業(yè)廳的時(shí)候,為確保業(yè)務(wù)的完整和正確性,經(jīng)常會(huì)需要用到短信的驗(yàn)證碼。最近因?yàn)槟呈I(yè)務(wù)需要,也做了個(gè)類(lèi)似的功能。
原理很簡(jiǎn)單,就是在用戶(hù)點(diǎn)擊"獲取驗(yàn)證碼"的時(shí)候,Ajax獲取一串固定位數(shù)的數(shù)字,然后寫(xiě)數(shù)據(jù)庫(kù)發(fā)短信,寫(xiě)Cookie設(shè)置驗(yàn)證碼的有效期。
JS請(qǐng)求驗(yàn)證碼如下:
$.ajax({
type: "GET",
url: "../Ajax/smsrandcodetest.ashx?phone=" + phone.val() + "&smsCodeRand=" + num,
success: function(result) {
if (result == "Y") {
alert("驗(yàn)證碼已發(fā)送至您輸入的手機(jī)號(hào)!有效期5分鐘");
RemainTime();
}
else {
alert("驗(yàn)證碼獲取失敗!請(qǐng)重新獲取");
}
},
error: function() { alert("error"); }
});
//獲取6位隨機(jī)驗(yàn)證碼
function random() {
var num = "";
for (i = 0; i < 6; i++) {
num = num + Math.floor(Math.random() * 10);
}
return num;
}
//驗(yàn)證碼有效期倒計(jì)時(shí)
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;'>驗(yàn)證碼已過(guò)期</span>";
}
else {
Account = setTimeout("RemainTime()", 1000);
}
iTime = iTime - 1;
}
$("#endtime").html(sTime);
}
前端要處理的工作基本如上,現(xiàn)在要在HttpHandler中添加邏輯了,為了防止Js生成的驗(yàn)證碼不符規(guī)則,我們?cè)诤蠖酥匦律梢淮危?/p>
if (smscoderand.Length != 6) //如果JS生成的隨機(jī)碼不符,則用C#生成隨機(jī)碼
{
smscoderand = GetRandom();
}
//寫(xiě)短信數(shù)據(jù),發(fā)SMS
//寫(xiě)Cookie,設(shè)置驗(yàn)證碼有效期,比如5分鐘
//注:如果以上都處理成功,返回"Y",處理失敗,返回"N"
這里為了方便,驗(yàn)證碼的有效期驗(yàn)證就用Cookie來(lái)完成。在業(yè)務(wù)提交的時(shí)候,會(huì)獲取客戶(hù)端的這個(gè)Cookie,看是否存在,如果不存在肯定就是過(guò)期了。如果后續(xù)業(yè)務(wù)擴(kuò)展可能會(huì)考慮加上數(shù)據(jù)庫(kù)的有效期驗(yàn)證,以及一些其它的規(guī)則,比如一小時(shí)、一天內(nèi)限制發(fā)送驗(yàn)證碼的條數(shù)(總不能讓你無(wú)限制的發(fā)送短信吧) 等等。
以上所述是針對(duì)JavaScript短信驗(yàn)證碼如何實(shí)現(xiàn)的詳細(xì)介紹,希望對(duì)大家有所幫助。
- javascript發(fā)送短信驗(yàn)證碼實(shí)現(xiàn)代碼
- JS實(shí)現(xiàn)簡(jiǎn)單短信驗(yàn)證碼界面
- JS短信驗(yàn)證碼倒計(jì)時(shí)功能的實(shí)現(xiàn)(沒(méi)有驗(yàn)證碼,只有倒計(jì)時(shí))
- JS獲取短信驗(yàn)證碼倒計(jì)時(shí)的實(shí)現(xiàn)代碼
- JavaScript獲取短信驗(yàn)證碼(周期性)
- 手動(dòng)實(shí)現(xiàn)js短信驗(yàn)證碼輸入框
- JS實(shí)現(xiàn)短信驗(yàn)證碼一鍵登錄功能
- javascript實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼案例
- 使用JavaScript實(shí)現(xiàn)前端短信驗(yàn)證碼獲取功能全過(guò)程
相關(guān)文章
使用JS動(dòng)態(tài)構(gòu)建目錄樹(shù)
本文詳細(xì)講解了使用JS動(dòng)態(tài)構(gòu)建目錄樹(shù)的方法,文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-01-01
詳解基于DllPlugin和DllReferencePlugin的webpack構(gòu)建優(yōu)化
這篇文章主要介紹了詳解基于DllPlugin和DllReferencePlugin的webpack構(gòu)建優(yōu)化,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
JS組件系列之Bootstrap table表格組件神器【終結(jié)篇】
Bootstrap Table是輕量級(jí)的和功能豐富的以表格的形式顯示的數(shù)據(jù),支持單選,復(fù)選框,排序,分頁(yè),顯示/隱藏列,固定標(biāo)題滾動(dòng)表,響應(yīng)式設(shè)計(jì),Ajax加載JSON數(shù)據(jù),點(diǎn)擊排序的列,卡片視圖等。本文給大家介紹JS組件系列之Bootstrap table表格組件神器【終結(jié)篇】,一起學(xué)習(xí)吧2016-05-05
純JS實(shí)現(xiàn)五子棋游戲兼容各瀏覽器(附源碼)
純JS實(shí)現(xiàn)五子棋游戲同時(shí)兼容各個(gè)主流瀏覽器,感興趣的朋友可以下載源碼學(xué)習(xí)下也是對(duì)你js技巧的晉級(jí)2013-04-04
echarts中tooltip添加點(diǎn)擊事件代碼示例
這篇文章主要給大家介紹了關(guān)于echarts中tooltip添加點(diǎn)擊事件的相關(guān)資料,echarts tooltip點(diǎn)擊事件是指當(dāng)用戶(hù)點(diǎn)擊圖表中的提示框(tooltip)時(shí)觸發(fā)的事件,需要的朋友可以參考下2023-07-07
JS如何獲取指定范圍內(nèi)的隨機(jī)數(shù)含小數(shù)
這篇文章主要介紹了JS如何獲取指定范圍內(nèi)的隨機(jī)數(shù)含小數(shù)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-12-12

