JavaScript中怎么隨機生成驗證碼并進(jìn)行校驗

發(fā)布時間：2021-06-16 13:48:53 來源：億速云閱讀：171 作者：Leah 欄目：開發(fā)技術(shù)

JavaScript中怎么隨機生成驗證碼并進(jìn)行校驗，相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xià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">驗證碼：</label>
            <input type="text" id="inputCode">
            <span id="text_show"></span>
        </div>
        <input type="button" id="Button1" value="確認(rèn)">
    </div>
    <script>
        // 1.生成驗證碼
        // 6位數(shù) 0-9 a-f 隨機生成6位 內(nèi)容必須是0-9 a-f 字符串
        // 數(shù)組 下標(biāo) 0、1、2…… 從數(shù)組當(dāng)中 隨機下標(biāo) 0-15位

        // 2.進(jìn)行驗證 點擊確認(rèn)時，進(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;
        
        // 點擊切換隨機數(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('您輸入的驗證碼不正確');
                    inputCode.value = '';
                    return false;
                } else {
                    alert('輸入正確');
                }
            }
        }
    </script>
</body>

看完上述內(nèi)容，你們掌握J(rèn)avaScript中怎么隨機生成驗證碼并進(jìn)行校驗的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細(xì)節(jié)

JavaScript中怎么隨機生成驗證碼并進(jìn)行校驗

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽