JavaScript實(shí)現(xiàn)隨機(jī)生成驗(yàn)證碼及校驗(yàn)
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)隨機(jī)生成驗(yàn)證碼及校驗(yàn)的具體代碼,供大家參考,具體內(nèi)容如下
輸入驗(yàn)證碼(區(qū)分大小寫)點(diǎn)擊確認(rèn),進(jìn)行校驗(yàn)。出錯(cuò)就彈框提示
點(diǎn)擊 看不清 重新隨機(jī)生成驗(yàn)證碼
當(dāng)驗(yàn)證碼輸入錯(cuò)誤時(shí)進(jìn)行提示
<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">驗(yàn)證碼:</label> <input type="text" id="inputCode"> <span id="text_show"></span> </div> <input type="button" id="Button1" value="確認(rèn)"> </div> <script> // 1.生成驗(yàn)證碼 // 6位數(shù) 0-9 a-f 隨機(jī)生成6位 內(nèi)容必須是0-9 a-f 字符串 // 數(shù)組 下標(biāo) 0、1、2…… 從數(shù)組當(dāng)中 隨機(jī)下標(biāo) 0-15位 // 2.進(jìn)行驗(yàn)證 點(diǎn)擊確認(rèn)時(shí),進(jìn)行對比 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; // 點(diǎn)擊切換隨機(jī)數(shù) var linkbt = document.getElementById('linkbt'); linkbt.addEventListener('click', function() { checkCode.innerText = randomWord(); }) // 提交進(jìn)行對比 document.getElementById('Button1').onclick = function() { var inputCode = document.querySelector('#inputCode'); if (inputCode.value != checkCode.innerText) { alert('您輸入的驗(yàn)證碼不正確'); inputCode.value = ''; return false; } else { alert('輸入正確'); } } } </script> </body>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

arguments對象驗(yàn)證函數(shù)的參數(shù)是否合法

Apply an AutoFormat to an Excel Spreadsheet

js函數(shù)定時(shí)器實(shí)現(xiàn)定時(shí)讀取系統(tǒng)實(shí)時(shí)連接數(shù)

使用Nginx部署前端項(xiàng)目的詳細(xì)步驟記錄

JavaScript中事件流冒泡的原理與實(shí)現(xiàn)