字母+数字组成四位验证码

最新推荐文章于 2021-07-17 23:20:33 发布

A_Tomato_

最新推荐文章于 2021-07-17 23:20:33 发布

阅读量954

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/A_Tomato_/article/details/104804517

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>字母+数字组成四位验证码</title>
</head>

<body>
    <input type="text" id="codeInp">
    <br>
    <span id="codeBox">AAAA</span>
    <button id="changeCode">看不清换一张</button>

    <script>
        let codeInp = document.getElementById('codeInp'),
            codeBox = document.getElementById('codeBox'),
            changeCode = document.getElementById('changeCode');
        /*
         * queryCode:获取到四位随机的验证码，然后放到指定的盒子中
         *    @params
         *    @return
         */
        function queryCode() {
            // 准备获取范围的字符串
            let area = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
            let result = "";
            for (let i = 0; i < 4; i++) {
                //每一次循环都获取一个随机的数字索引
                let ran = Math.round(Math.random() * 61); //area里一共62个字符，除去0，就是*61
                // 再根据获取的索引从范围字符串中找到对应的字符，把找到的字符拼接到最后的结果中
                result += area.charAt(ran);
            }
            // 放到盒子里
            codeBox.innerHTML = result;
        }

        // 第一次加载页面需要执行方法，让其显示在页面中
        queryCode();
        // 点击看不清按钮，需要重新执行方法生成新的验证码
        changeCode.onclick = queryCode;

        // 文本框失去焦点的时候：验证用户输入的内容和验证码是否相同，给予相关的提示，如果不一样需要重新生成验证码
        codeInp.onblur = function () {
            // onblur：文本框失去焦点事件
            // 获取用户和验证码内容（表单元素，value/非表单元素。innerHtml获取内容）
            let val = codeInp.value,
                code = codeBox.innerHTML;
            //不区分大小写（.toLowerCase都转成小写）
            if (val.toLowerCase() === code.toLowerCase()) {
                alert('验证码输入成功！');
            } else {
                alert('温馨提示，验证码输入有误，请重试！');
                codeInp.value = '';
                // 重新生成验证码
                queryCode();
            }

        }
    </script>
</body>

</html>