JS生成6位随机验证码

思路

1.创建一个数组,保存随机数字和大写字母,将作为候选组成验证码的字符

let codeArr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];

2.假设验证码长度为6,那循环6次,每次都将随机产生一个codeArr下标,相当于随机产生一个字符codeArr[下标],然后拼接起来,就是6位随机验证码

实现

<script>
    let code;
    function createCode() {
        let codeInput = document.getElementsByClassName("code")[0];
        let codeArr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
        let length = 6;
        code = "";
        for (let i = 0; i < length; i++) {
            let randomI = Math.floor(Math.random() * 36);
            code += codeArr[randomI];
        }
        console.log(code);
        if (code) {
            codeInput.value = code;
        }
    }
    function verifyCode() {
        let input = document.getElementById("verify-code");
        let value = input.value;
        if (value.length <= 0) {
            alert("输入不能为空");
            input.focus();
        } else if (value != code) {
            alert("不匹配");
            //重新给一个
            createCode();
            input.value = "";
            input.focus();
        } else {
            alert("验证成功")
        }
    }
    window.onload = function () {
        createCode();
    }
</script>

html

<input type="text" id="verify-code"/>
<input type="text" class="code" readonly/x  >
<div>
    <input type="button" value="submit" onclick="verifyCode()"/>
</div>

每天都努力一点点
谢谢你看完


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 背景 验证码就是把一串随机产品的数字动态生成一幅图片,再加上干扰元素。此时用户可以通过肉眼能识别里面的数字或者字符...
    dy2903阅读 2,190评论 0 7
  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,281评论 0 4
  • 上次分享一个本专题的一个开篇,讲诉了Axure原型的三个层次,即表现层、逻辑层、展示层。并给出了一个简单的例子:音...
    跹尘阅读 2,197评论 1 2
  • 常常听到这样一句话“有啥不能有病,没啥不能没钱!” 朋友关系,亲情,婚姻,各种关系,都能和钱挂上钩...
    康乃娟阅读 822评论 0 1
  • 前两天,有个朋友我们几个好久没见的朋友,因为其中一个朋友过生日,我们就约在一起吃饭、开黑打游戏。因为人比较多,所以...
    iNotes阅读 894评论 1 1