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

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

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

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

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

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

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

獲取驗(yàn)證碼

聲明一個(gè)字符串str，內(nèi)容為0-9、a-z、A-Z，因?yàn)榻酉聛眚?yàn)證碼字符的取值就是在這些字符中進(jìn)行的取值。調(diào)用獲取隨機(jī)數(shù)的函數(shù)，獲得一個(gè)范圍在0到str.length - 1的隨機(jī)數(shù)字，以該數(shù)字為下標(biāo)從字符串str中取出一個(gè)字符。假如現(xiàn)在要生成一個(gè)四位的隨機(jī)驗(yàn)證碼，我們就通過for循環(huán)來生成四位隨機(jī)字符，隨后把這四位隨機(jī)字符拼接在一起。把該過程封裝成為一個(gè)函數(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. // 獲取一個(gè) 
8.         var n = getRandom(0, str.length - 1); 
9.         var s = str[n]; 
10.         code += s; 
11.     } 
12.     return code; 
13. } 

在頁(yè)面中使用

Html代碼為：

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

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

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

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è)面驗(yàn)證碼的內(nèi)容 
8. oSpan.innerHTML = getCode(); 
9. // 點(diǎn)擊重新生成新的驗(yàn)證碼 
10. oSpan.onclick = function() { 
11.     oSpan.innerHTML = getCode(); 
12. } 
13. // 點(diǎn)擊驗(yàn)證按鈕進(jìn)行驗(yàn)證 
14. oBtn.onclick = function() { 
15. // 比較輸入框的內(nèi)容和驗(yàn)證碼標(biāo)簽的內(nèi)容     
16. if ( oInp.value == oSpan.innerHTML ) { 
17.         oMsg.innerHTML = ''; 
18.     } else { 
19.         // 提示錯(cuò)誤信息 
20.         oMsg.innerHTML = '驗(yàn)證碼輸入錯(cuò)誤'; 
21.     } 
22. } 
23.  
24. }