<noframes id="xh9jd"><menuitem id="xh9jd"></menuitem>

      <address id="xh9jd"></address>

        <ol id="xh9jd"><th id="xh9jd"><span id="xh9jd"></span></th></ol>

        <noframes id="xh9jd">

        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 您更想做哪個方向的工作?

        獲取測試結果
         
        課程資料、活動優惠 領取通道