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

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

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

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

獲取隨機數(shù)

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

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

獲取驗證碼

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

1. // 獲取隨機驗證碼 
2. function getCode() { 
3.     var str = '1234567890qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM'; 
4. var code = ''; //驗證碼 
5. // 循環(huán)生成四位的隨機字符 
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; 
13. } 

在頁面中使用

Html代碼為：

1. <input type="text" > 
2. <span></span> 
3. <em></em><br> 
4. <button>驗證</button> 

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

點擊驗證按鈕時比較驗證碼標簽和輸入框的內(nèi)容，不一致時提示輸入錯誤。

js的代碼為：

1. window.onload = function () {  
2. // 獲取標簽 
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. // 初始頁面驗證碼的內(nèi)容 
8. oSpan.innerHTML = getCode(); 
9. // 點擊重新生成新的驗證碼 
10. oSpan.onclick = function() { 
11.     oSpan.innerHTML = getCode(); 
12. } 
13. // 點擊驗證按鈕進行驗證 
14. oBtn.onclick = function() { 
15. // 比較輸入框的內(nèi)容和驗證碼標簽的內(nèi)容     
16. if ( oInp.value == oSpan.innerHTML ) { 
17.         oMsg.innerHTML = ''; 
18.     } else { 
19.         // 提示錯誤信息 
20.         oMsg.innerHTML = '驗證碼輸入錯誤'; 
21.     } 
22. } 
23.  
24. }