400-650-7353

精品課程

您所在的位置:首頁 > IT干貨資料 > web前端 > 【Web前端基礎知識】Js實現驗證碼功能

【Web前端基礎知識】Js實現驗證碼功能

  • 發布: 優就業it培訓
  • 來源:優就業
  • 2021-06-18 17:16:52
  • 閱讀()
  • 分享
  • 手機端入口

在平時我們登錄或者注冊時,都會見到要輸入驗證碼的功能,當輸入正確時才可以進行登錄或者注冊,那我們如何使用js來實現一個輸入驗證碼的進行驗證的功能呢。

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

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

獲取隨機數

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

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

獲取驗證碼

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

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

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

點擊驗證按鈕時比較驗證碼標簽和輸入框的內容,不一致時提示輸入錯誤。

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

學習疑問申請解答
您的姓名
您的電話
意向課程
 

中公優就業

IT小助手

掃描上方二維碼添加好友,請備注:599,享學習福利。

>>本文地址:
注:本站稿件未經許可不得轉載,轉載請保留出處及源文件地址。

推薦閱讀

優就業:ujiuye

關注中公優就業官方微信

  • 關注微信回復關鍵詞“大禮包”,享學習福利
QQ交流群
在線疑問解答
(加群備注“網站”)
IT培訓交流群 加入群聊 +
軟件測試 加入群聊 +
全鏈路UI/UE設計 加入群聊 +
Python+人工智能 加入群聊 +
互聯網營銷 加入群聊 +
Java開發 加入群聊 +
PHP開發 加入群聊 +
VR/AR游戲開發 加入群聊 +
大前端 加入群聊 +
大數據 加入群聊 +
Linux云計算 加入群聊 +
優就業官方微信
掃碼回復關鍵詞“大禮包”
享學習福利

測一測
你適合學哪門IT技術?

1 您的年齡

2 您的學歷

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

獲取測試結果
 
課程資料、活動優惠 領取通道
 
 
五月天黄色网站