当前位置:编程学习 > > 正文

生成随机数javascript(JavaScript实现随机生成验证码及校验)

时间:2021-11-01 10:12:32类别:编程学习

生成随机数javascript

JavaScript实现随机生成验证码及校验

本文实例为大家分享了JavaScript实现随机生成验证码及校验的具体代码,供大家参考,具体内容如下

输入验证码(区分大小写)点击确认,进行校验。出错就弹框提示

点击 看不清 重新随机生成验证码

生成随机数javascript(JavaScript实现随机生成验证码及校验)

当验证码输入错误时进行提示

生成随机数javascript(JavaScript实现随机生成验证码及校验)

  • <body>
        <li class="v_code">
            <li class="code_show">
                <span class="code" id="checkCode"></span>
                <a href="#" id="linkbt">看不清,换一张</a>
            </li>
            <li class="input_code">
                <label for="inputCode">验证码:</label>
                <input type="text" id="inputCode">
                <span id="text_show"></span>
            </li>
            <input type="button" id="Button1" value="确认">
        </li>
        <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>
    
  • 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。

    标签:
    上一篇下一篇

    猜您喜欢

    热门推荐