Web製作驗證碼功能執行個體代碼，web製作驗證碼執行個體

Web製作驗證碼功能執行個體代碼，web製作驗證碼執行個體

web開發中，經常會使用驗證碼功能，例如登入、註冊，或其他關鍵功能之前經常會使用。合理使用

驗證功能可以防止ddos攻擊、爬蟲攻擊等。

   實現效果：

  實現原理：

   由後台提供產生驗證碼的介面，前端每次請求會後端會產生驗證碼圖片和驗證碼，驗證碼圖片發送到用戶端供用戶端顯示，

   驗證碼字串儲存再後端的Session中，待前端再次請求業務介面與session裡的驗證碼字串做比對。

   實現思路：

   1、先由後端提供可以生產驗證碼圖片的介面

   2、前端通過 img 中設定 src 屬性，請求驗證碼產生的介面。

   3、對img設定點擊事件，每次點擊img的時候，都會改變src值重新請求src

   4、做頁面介面操作時，比對輸入的驗證碼是否正確

   實現代碼：

   前端：

     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製作驗證碼功能執行個體代碼，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對幫客之家網站的支援！