JavaScript中怎么随机生成验证码并进行校验

发布时间:2021-06-16 13:48:53 作者:Leah
来源:亿速云 阅读:171

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>

看完上述内容,你们掌握JavaScript中怎么随机生成验证码并进行校验的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注亿速云行业资讯频道,感谢各位的阅读!

推荐阅读:
  1. 生成随机验证码函数
  2. Python如何生成随机验证码

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

javascript

上一篇:Java中怎么实现一个双轴快速排序算法

下一篇:PHP怎么初始化PDO及原始SQL语句操作

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》