JavaScript實現(xiàn)隨機生成驗證碼及校驗
更新時間:2021年06月16日 11:46:15 作者:江南時雨
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)隨機生成驗證碼及校驗,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了JavaScript實現(xiàn)隨機生成驗證碼及校驗的具體代碼,供大家參考,具體內(nèi)容如下
輸入驗證碼(區(qū)分大小寫)點擊確認,進行校驗。出錯就彈框提示
點擊 看不清 重新隨機生成驗證碼
當驗證碼輸入錯誤時進行提示
<body> <div class="v_code"> <div class="code_show"> <span class="code" id="checkCode"></span> <a href="#" id="linkbt">看不清,換一張</a> </div> <div class="input_code"> <label for="inputCode">驗證碼:</label> <input type="text" id="inputCode"> <span id="text_show"></span> </div> <input type="button" id="Button1" value="確認"> </div> <script> // 1.生成驗證碼 // 6位數(shù) 0-9 a-f 隨機生成6位 內(nèi)容必須是0-9 a-f 字符串 // 數(shù)組 下標 0、1、2…… 從數(shù)組當中 隨機下標 0-15位 // 2.進行驗證 點擊確認時,進行對比 window.onload = function() { const randomWord = () => { let code = ''; for (var i = 0; i < 6; i++) { var type = getRandom(1,3); switch(type) { case 1: code += String.fromCharCode(getRandom(48,57)) // 數(shù)字 break; case 2: code += String.fromCharCode(getRandom(65,90)); //大寫字母 break; case 3: code += String.fromCharCode(getRandom(97,122)); //小寫字母 break; } } return code; } function getRandom (min, max) { return Math.round(Math.random()*(max-min)+min) } // 調(diào)用取數(shù)函數(shù) const rand = randomWord(); //console.log(rand); var checkCode = document.getElementById('checkCode'); checkCode.innerText = rand; // 點擊切換隨機數(shù) var linkbt = document.getElementById('linkbt'); linkbt.addEventListener('click', function() { checkCode.innerText = randomWord(); }) // 提交進行對比 document.getElementById('Button1').onclick = function() { var inputCode = document.querySelector('#inputCode'); if (inputCode.value != checkCode.innerText) { alert('您輸入的驗證碼不正確'); inputCode.value = ''; return false; } else { alert('輸入正確'); } } } </script> </body>
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
arguments對象驗證函數(shù)的參數(shù)是否合法
Javascript函數(shù)中的參數(shù)對象arguments是個對象,而不是數(shù)組。但它可以類似數(shù)組那樣通過數(shù)字下表訪問其中的元素,而且它也有l(wèi)ength屬性標識它的元素的個數(shù)。2015-06-06Apply an AutoFormat to an Excel Spreadsheet
Apply an AutoFormat to an Excel Spreadsheet...2007-06-06js函數(shù)定時器實現(xiàn)定時讀取系統(tǒng)實時連接數(shù)
這篇文章主要介紹了使用js函數(shù)定時器實現(xiàn)定時讀取系統(tǒng)實時連接數(shù),需要的朋友可以參考下2014-04-04