快捷導(dǎo)航

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

更新時(shí)間：2017年06月19日 14:49:22 作者：kerryqpw

web開(kāi)發(fā)中，經(jīng)常會(huì)使用驗(yàn)證碼功能，例如登錄、注冊(cè)，或其他關(guān)鍵功能之前經(jīng)常會(huì)使用。下面通過(guò)實(shí)例代碼給大家介紹Web制作驗(yàn)證碼功能實(shí)例代碼，感興趣的朋友一起看看吧

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

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

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

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

由后臺(tái)提供生成驗(yàn)證碼的接口，前端每次請(qǐng)求會(huì)后端會(huì)生成驗(yàn)證碼圖片和驗(yàn)證碼，驗(yàn)證碼圖片發(fā)送到客戶(hù)端供客戶(hù)端顯示，

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

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

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

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

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

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

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

前端：

html:

<div class="centent-top" style=""> 
   <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 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(); 
 } 
 // 換驗(yàn)證碼 
 function changPin() { 
  $("#yzm").attr("src", "/SchoolRoll/accuser/code/check?time=" + Math.random()); 
 }

以上所述是小編給大家介紹的Web制作驗(yàn)證碼功能實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: