1. <dd id="jcnig"><nav id="jcnig"><delect id="jcnig"></delect></nav></dd>
      <dfn id="jcnig"><tt id="jcnig"><sup id="jcnig"></sup></tt></dfn>

    2. <cite id="jcnig"></cite>
      <cite id="jcnig"><tt id="jcnig"></tt></cite>

      <address id="jcnig"><nav id="jcnig"></nav></address>
    3. <address id="jcnig"><nav id="jcnig"></nav></address>
      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 您更想做哪個方向的工作?

      獲取測試結果
       
      課程資料、活動優惠 領取通道
       
       
      日本一本二本三本av网站,一本加勒比HEZYO东京热高清,一本久久A久久精品综合