（前端模拟）字母加数字四位不重复验证码的实现_后端验证返回四个数字前端验证码怎么展示

作者：pgrmghi | 2024-02-01 18:23:37

踩

后端验证返回四个数字前端验证码怎么展示

验证码的实现，通常是由后端操作。今天带来一个前端模拟验证码的js代码，要求是点击刷新，得到四位字母加数字且不重复的验证码。代码如下：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 160px;
            height: 36px;
            background-color: #f40;
            line-height: 36px;
            text-align: center;
            color: #fff;
            font-size: 16px;
            margin: 30px auto;
            cursor: pointer;
 
            -webkit-user-select: none; /*禁止用户选中文字*/
        }
    </style>
</head>
<body>
<div id="code_box">
    Af3D
</div>
 
<script>
    var code_box = document.getElementById("code_box");
 
    function refreshCode() {
 
        var code = '0123456789qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM',//62个字符 随机选择4位
            char = '',
            result = '';
 
        for (var i = 0; i < 4; i++) {
 
            //随机选择一位  （0,61） 写出0到61的随机的索引数字
            var code_index = Math.round(Math.random()*61);
 
            //得到随机的索引  取出随机地字符
            var char = code[code_index];
 
            //随机取出的字符 存在几个相同重复的问题 ，而且对于字母，不能区分大小写。
            // 避免重复的思路是：取出字符之后,和最后的result对比一下，看看里边是不是已经存在了，如果存在本次循环就终止，进行下一次
 
            if (result.toUpperCase().indexOf(char.toUpperCase()) > -1)
 
            //indexOf() == -1 说明结果里边没有要找的字符 那么 > -1 就是 里边有重复的字符
            {
                i --;
                //为什么会 --？ 因为如果条件成立，那么本轮循环就结束进行下一轮循环（自然i就加1了），那么本轮本应该取出的字符就没有了
                //到最后会少一个字符 缺席
                continue;//终止本轮循环 进行下一轮
            }
 
            result += char;
        }
 
        code_box.innerHTML = result;
    }
 
 
    //点击事件
 
    code_box.onclick = refreshCode;
 
 
 
</script>
 
 
 
</body>
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/article/detail/54504

（前端模拟）字母加数字四位不重复验证码的实现_后端验证返回四个数字 前端验证码怎么展示

（前端模拟）字母加数字四位不重复验证码的实现_后端验证返回四个数字前端验证码怎么展示