Web制作驗(yàn)證碼功能實(shí)例代碼
web開發(fā)中，經(jīng)常會(huì)使用驗(yàn)證碼功能，例如登錄、注冊，或其他關(guān)鍵功能之前經(jīng)常會(huì)使用。合理使用
驗(yàn)證功能可以防止ddos攻擊、爬蟲攻擊等。
實(shí)現(xiàn)效果：
實(shí)現(xiàn)原理：
由后臺(tái)提供生成驗(yàn)證碼的接口，前端每次請求會(huì)后端會(huì)生成驗(yàn)證碼圖片和驗(yàn)證碼，驗(yàn)證碼圖片發(fā)送到客戶端供客戶端顯示，
驗(yàn)證碼字符串保存再后端的Session中，待前端再次請求業(yè)務(wù)接口與session里的驗(yàn)證碼字符串做比對(duì)。
實(shí)現(xiàn)思路：
1、先由后端提供可以生產(chǎn)驗(yàn)證碼圖片的接口
2、前端通過 img 中設(shè)置 src 屬性，請求驗(yàn)證碼生成的接口。
3、對(duì)img設(shè)置點(diǎn)擊事件，每次點(diǎn)擊img的時(shí)候，都會(huì)改變src值重新請求src
4、做頁面接口操作時(shí)，比對(duì)輸入的驗(yàn)證碼是否正確
實(shí)現(xiàn)代碼：
前端：
html:
<div class="centent-top" style=""> <div class="centent-left"><span>*</span>驗(yàn)證碼：</div> <input type="text" class="verification-code-input"> <div class="verification-code"><img id="yzm" src="/SchoolRoll/accuser/code/check"></div> <div class="change"><span>看不清？</span><span style="color:#37CAF2;cursor: pointer;" id="changeImgCode">換一張</span></div> </div>
js:
var yzm =document.getElementById("yzm");
var changeImgCode =document.getElementById("changeImgCode");
yzm.onclick=function () {
changPin();
}
changeImgCode.onclick=function () {
changPin();
}
// 換驗(yàn)證碼
function changPin() {
$("#yzm").attr("src", "/SchoolRoll/accuser/code/check?time=" + Math.random());
}
以上所述是小編給大家介紹的Web制作驗(yàn)證碼功能實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
javascript獲得CheckBoxList選中的數(shù)量
javascript獲得CheckBoxList選中的數(shù)量(jQuery與Javascript對(duì)照學(xué)習(xí)/前臺(tái)與后臺(tái))2009-10-10
JavaScript中實(shí)現(xiàn)異步編程模式的4種方法
這篇文章主要介紹了JavaScript中實(shí)現(xiàn)異步編程模式的4種方法,本文講解了回調(diào)函數(shù)、事件監(jiān)聽、發(fā)布/訂閱、Promises對(duì)象4種方法,需要的朋友可以參考下2014-09-09
微信小程序scroll-view實(shí)現(xiàn)滾動(dòng)到錨點(diǎn)左側(cè)導(dǎo)航欄點(diǎn)餐功能(點(diǎn)擊種類,滾動(dòng)到錨點(diǎn))
這篇文章主要介紹了微信小程序scroll-view左側(cè)導(dǎo)航欄點(diǎn)餐功能實(shí)現(xiàn)，點(diǎn)擊種類，滾動(dòng)到錨點(diǎn)；滾動(dòng)到錨點(diǎn)，種類選中,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-06
JavaScript基于SVG的圖片切換效果實(shí)例代碼
這篇文章主要介紹了JavaScript基于SVG的圖片切換效果實(shí)例代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-12-12
深入淺析JSON.parse()、JSON.stringify()和eval()的作用詳解
這篇文章主要介紹了深入淺析JSON.parse()、JSON.stringify()和eval()的作用詳解的相關(guān)資料,需要的朋友可以參考下2016-04-04
javascript canvas封裝動(dòng)態(tài)時(shí)鐘
這篇文章主要為大家詳細(xì)介紹了javascript canvas封裝動(dòng)態(tài)時(shí)鐘，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實(shí)現(xiàn)漫畫中大雨滂沱的效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
這篇文章主要介紹了ES2020 新特性(種草),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
關(guān)于js window.location.href location.href parent.location.href top.location.href 的用法2010-05-05
這篇文章主要介紹了原生js中ajax訪問的實(shí)例詳解的相關(guān)資料,希望通過本文大家能夠掌握理解這部分內(nèi)容，需要的朋友可以參考下2017-09-09