Web製作驗證碼的功能實例程式碼

驗證碼（CAPTCHA）是「Completely Automated Public Turing test to tell Computers and Humans Apart」（全自動區分計算機和人類的圖靈測試）的縮寫，是一種區分用戶是計算機還是人的公共全自動程序。可以防止：惡意破解密碼、刷票、論壇灌水，有效防止某個駭客對某一個特定註冊用戶用特定程序暴力破解方式進行不斷的登陸嘗試，實際上用驗證碼是現在很多網站通行的方式，我們利用比較簡易的方式實現了這個功能。這個問題可以由電腦產生並評判，但是必須只有人類才能解答。由於電腦無法解答CAPTCHA的問題，所以回答出問題的使用者就可以被認為是人類

下面透過實例程式碼跟大家介紹Web製作驗證碼功能實例程式碼，有興趣的朋友一起看看吧

   實現效果：

#  實作原則：

   後台提供產生驗證碼的介面，前端每次要求都會後端會產生驗證碼圖片和驗證碼，驗證碼圖片傳送到客戶端供客戶端顯示，

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

   實作想法：

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

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

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

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

   實作程式碼：

   前端：

     html:   

<p class="centent-top" > 
   <p class="centent-left"><span>*</span>验证码：</p> 
   <input type="text" class="verification-code-input"> 
   <p class="verification-code"><img  src="/static/imghwm/default1.png"  data-src="/SchoolRoll/accuser/code/check"  class="lazy"  id="yzm"  alt="Web製作驗證碼的功能實例程式碼" ></p> 
   <p class="change"><span>看不清？</span><span style="color:#37CAF2;cursor: pointer;" id="changeImgCode">换一张</span></p> 
  </p>

   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製作驗證碼的功能實例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！