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