溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
web開發中，經常會使用驗證碼功能，例如登錄、注冊，或其他關鍵功能之前經常會使用。合理使用
驗證功能可以防止ddos攻擊、爬蟲攻擊等。
實現效果：
實現原理：
由后臺提供生成驗證碼的接口，前端每次請求會后端會生成驗證碼圖片和驗證碼，驗證碼圖片發送到客戶端供客戶端顯示，
驗證碼字符串保存再后端的Session中，待前端再次請求業務接口與session里的驗證碼字符串做比對。
實現思路：
1、先由后端提供可以生產驗證碼圖片的接口
2、前端通過 img 中設置 src 屬性，請求驗證碼生成的接口。
3、對img設置點擊事件，每次點擊img的時候，都會改變src值重新請求src
4、做頁面接口操作時，比對輸入的驗證碼是否正確
實現代碼：
前端：
html:
<div class="centent-top" > <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 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制作驗證碼功能實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
