JavaScript實現隨機生成驗證碼及校驗
本文實例為大傢分享瞭JavaScript實現隨機生成驗證碼及校驗的具體代碼,供大傢參考,具體內容如下
輸入驗證碼(區分大小寫)點擊確認,進行校驗。出錯就彈框提示
點擊 看不清 重新隨機生成驗證碼
當驗證碼輸入錯誤時進行提示
<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位數 0-9 a-f 隨機生成6位 內容必須是0-9 a-f 字符串 // 數組 下標 0、1、2…… 從數組當中 隨機下標 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)) // 數字 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) } // 調用取數函數 const rand = randomWord(); //console.log(rand); var checkCode = document.getElementById('checkCode'); checkCode.innerText = rand; // 點擊切換隨機數 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>
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。
推薦閱讀:
- JavaScript實現簡易計算器案例
- javascript實現隨機抽獎功能
- JavaScript深入介紹WebAPI的用法
- JavaScript實現頁面動態驗證碼的實現示例
- JavaScript仿windows計算器功能