• <xmp id="wgksg"><samp id="wgksg"></samp>
  • <blockquote id="wgksg"></blockquote>
  • 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 您更想做哪個方向的工作?

    獲取測試結果
     
    課程資料、活動優惠 領取通道
     
     
    A级毛片毛片免费观看久,A毛看片免费观看视频,毛片曰本女人牲交视频视频