溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Web制作驗(yàn)證碼功能實(shí)例代碼

發(fā)布時間：2020-09-14 17:50:17 來源：腳本之家 閱讀：135 作者：kerryqpw 欄目：web開發(fā)

web開發(fā)中，經(jīng)常會使用驗(yàn)證碼功能，例如登錄、注冊，或其他關(guān)鍵功能之前經(jīng)常會使用。合理使用

驗(yàn)證功能可以防止ddos攻擊、爬蟲攻擊等。

   實(shí)現(xiàn)效果：

Web制作驗(yàn)證碼功能實(shí)例代碼

  實(shí)現(xiàn)原理：

   由后臺提供生成驗(yàn)證碼的接口，前端每次請求會后端會生成驗(yàn)證碼圖片和驗(yàn)證碼，驗(yàn)證碼圖片發(fā)送到客戶端供客戶端顯示，

   驗(yàn)證碼字符串保存再后端的Session中，待前端再次請求業(yè)務(wù)接口與session里的驗(yàn)證碼字符串做比對。

   實(shí)現(xiàn)思路：

   1、先由后端提供可以生產(chǎn)驗(yàn)證碼圖片的接口

   2、前端通過 img 中設(shè)置 src 屬性，請求驗(yàn)證碼生成的接口。

   3、對img設(shè)置點(diǎn)擊事件，每次點(diǎn)擊img的時候，都會改變src值重新請求src

   4、做頁面接口操作時，比對輸入的驗(yàn)證碼是否正確

   實(shí)現(xiàn)代碼：

   前端：

     html:   

<div class="centent-top" > 
   <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  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í)例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對億速云網(wǎng)站的支持！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手