400-650-7353
您所在的位置:首頁 > IT干貨資料 > web前端 > 【W(wǎng)eb前端基礎(chǔ)知識】Js實(shí)現(xiàn)驗(yàn)證碼功能

【W(wǎng)eb前端基礎(chǔ)知識】Js實(shí)現(xiàn)驗(yàn)證碼功能

  • 發(fā)布: 優(yōu)就業(yè)it培訓(xùn)
  • 來源:優(yōu)就業(yè)
  • 2021-06-18 17:16:52
  • 閱讀()
  • 分享
  • 手機(jī)端入口

在平時我們登錄或者注冊時,都會見到要輸入驗(yàn)證碼的功能,當(dāng)輸入正確時才可以進(jìn)行登錄或者注冊,那我們?nèi)绾问褂胘s來實(shí)現(xiàn)一個輸入驗(yàn)證碼的進(jìn)行驗(yàn)證的功能呢。

驗(yàn)證碼生成的內(nèi)容都是隨機(jī)的,所以需要先獲取一個隨機(jī)數(shù),根據(jù)這個隨機(jī)數(shù)再去獲取一個隨機(jī)的數(shù)字或字母,最后將獲取到的四位隨機(jī)數(shù)字或字母組合到一起,就生成了一個隨機(jī)的驗(yàn)證碼。

首先我們先聲明一個字符串,內(nèi)容為0-9、a-z、A-Z,再完成一個獲取隨機(jī)數(shù)的函數(shù)封裝,利用數(shù)學(xué)對象的獲取隨機(jī)數(shù)方法Math.random(),取一個從0到該字符串長度的隨機(jī)數(shù)字。

獲取隨機(jī)數(shù)

根據(jù)思路我們先完成一個獲取隨機(jī)數(shù)的函數(shù)封裝,利用數(shù)學(xué)對象的獲取隨機(jī)數(shù)方法Math.random(),得到一個最大值到最小值之間的數(shù)字,最后進(jìn)行一下取整。

  1. // 獲取最大值到最小值之間的隨機(jī)數(shù) 
  2. function getRandom(min, max) { 
  3.     return Math.floor( Math.random() * ( max - min + 1 ) + min ); 

獲取驗(yàn)證碼

聲明一個字符串str,內(nèi)容為0-9、a-z、A-Z,因?yàn)榻酉聛眚?yàn)證碼字符的取值就是在這些字符中進(jìn)行的取值。調(diào)用獲取隨機(jī)數(shù)的函數(shù),獲得一個范圍在0到str.length - 1的隨機(jī)數(shù)字,以該數(shù)字為下標(biāo)從字符串str中取出一個字符。假如現(xiàn)在要生成一個四位的隨機(jī)驗(yàn)證碼,我們就通過for循環(huán)來生成四位隨機(jī)字符,隨后把這四位隨機(jī)字符拼接在一起。把該過程封裝成為一個函數(shù),將驗(yàn)證碼作為函數(shù)的返回值return出去。

  1. // 獲取隨機(jī)驗(yàn)證碼 
  2. function getCode() { 
  3.     var str = '1234567890qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM'
  4. var code = ''; //驗(yàn)證碼 
  5. // 循環(huán)生成四位的隨機(jī)字符 
  6. for ( var i = 0; i < 4; i++ ) { 
  7. // 獲取一個 
  8.         var n = getRandom(0, str.length - 1); 
  9.         var s = str[n]; 
  10.         code += s; 
  11.     } 
  12.     return code; 

在頁面中使用

Html代碼為:

  1. <input type="text" > 
  2. <span></span> 
  3. <em></em><br> 
  4. <button>驗(yàn)證</button> 

在頁面中進(jìn)行使用時,首次打開頁面時調(diào)用獲取驗(yàn)證碼的函數(shù),將返回的隨機(jī)驗(yàn)證碼賦值給標(biāo)簽,點(diǎn)擊標(biāo)簽時刷新驗(yàn)證碼,即點(diǎn)擊時再次調(diào)用getCode函數(shù),給驗(yàn)證碼標(biāo)簽賦值。

點(diǎn)擊驗(yàn)證按鈕時比較驗(yàn)證碼標(biāo)簽和輸入框的內(nèi)容,不一致時提示輸入錯誤。

js的代碼為:

  1. window.onload = function () {  
  2. // 獲取標(biāo)簽 
  3. var oInp = document.getElementsByTagName('input')[0]; 
  4. var oSpan = document.getElementsByTagName('span')[0]; 
  5. var oBtn = document.getElementsByTagName('button')[0]; 
  6. var oMsg = document.getElementsByTagName('em')[0]; 
  7. // 初始頁面驗(yàn)證碼的內(nèi)容 
  8. oSpan.innerHTML = getCode(); 
  9. // 點(diǎn)擊重新生成新的驗(yàn)證碼 
  10. oSpan.onclick = function() { 
  11.     oSpan.innerHTML = getCode(); 
  12. // 點(diǎn)擊驗(yàn)證按鈕進(jìn)行驗(yàn)證 
  13. oBtn.onclick = function() { 
  14. // 比較輸入框的內(nèi)容和驗(yàn)證碼標(biāo)簽的內(nèi)容     
  15. if ( oInp.value == oSpan.innerHTML ) { 
  16.         oMsg.innerHTML = ''
  17.     } else { 
  18.         // 提示錯誤信息 
  19.         oMsg.innerHTML = '驗(yàn)證碼輸入錯誤'
  20.     } 
  21.  
文章“【W(wǎng)eb前端基礎(chǔ)知識】Js實(shí)現(xiàn)驗(yàn)證碼功能”已幫助

更多內(nèi)容

>>本文地址:http://m.littlerockbway.com/zhuanye/2021/69055.html

THE END  

聲明:本站稿件版權(quán)均屬中公教育優(yōu)就業(yè)所有,未經(jīng)許可不得擅自轉(zhuǎn)載。

1 您的年齡

2 您的學(xué)歷

3 您更想做哪個方向的工作?

獲取測試結(jié)果
  • 大前端大前端
  • 大數(shù)據(jù)大數(shù)據(jù)
  • 互聯(lián)網(wǎng)營銷互聯(lián)網(wǎng)營銷
  • JavaJava
  • Linux云計(jì)算Linux
  • Python+人工智能Python
  • 嵌入式物聯(lián)網(wǎng)嵌入式
  • 全域電商運(yùn)營全域電商運(yùn)營
  • 軟件測試軟件測試
  • 室內(nèi)設(shè)計(jì)室內(nèi)設(shè)計(jì)
  • 平面設(shè)計(jì)平面設(shè)計(jì)
  • 電商設(shè)計(jì)電商設(shè)計(jì)
  • 網(wǎng)頁設(shè)計(jì)網(wǎng)頁設(shè)計(jì)
  • 全鏈路UI/UE設(shè)計(jì)UI設(shè)計(jì)
  • VR/AR游戲開發(fā)VR/AR
  • 網(wǎng)絡(luò)安全網(wǎng)絡(luò)安全
  • 新媒體與短視頻運(yùn)營新媒體
  • 直播帶貨直播帶貨
  • 智能機(jī)器人軟件開發(fā)智能機(jī)器人
 

快速通道fast track

近期開班時間TIME