JS 验证码生成及校验（详细注释）

好大一个绿菠萝

已于 2022-02-16 00:08:28 修改

阅读量1.1k

点赞数 2

分类专栏： javascript实例文章标签： javascript elementui vue.js

于 2021-12-10 00:30:45 首次发布

本文链接：https://blog.csdn.net/weixin_46249441/article/details/121847264

版权

javascript实例专栏收录该内容

14 篇文章 0 订阅

订阅专栏

这是个非常简单的(粗糙)模拟验证码生成及校验的小案例，只简单的实现下功能，后续希望可以做验证码背景是有颗粒的，同时有干扰线...更符合实际场景的验证码生成及校验。

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>验证码生成及校验</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="v_code">
        <div class="code_show">
            <span class="code" id="checkCode"></span>
            <a id="linkbt">看不清换一张</a>
        </div>
        <div class="input_code">
            <label class="lable"for="inputCode">验证码：</label>
            <input type="text" id="inputCode" />
            <!-- <span id="text_show"></span> -->
        </div>
        <input id="Button1" type="button" value="确定" />
    </div>
    <script>
        
        window.onload = function(){
            // 1.生成验证码
            // 4位数 a-o随机生成4位数，内容必须是a-o字符串
            var res = getCode();
            function getCode(){
                var arr = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o'];
                var str = '';
                for(var i = 0; i < 4; i++){
                    num = Math.round(Math.random() * (15-0)+0);
                    str += arr[num];
                }
                return str;
            }
            document.getElementById('checkCode').innerText = getCode();

            // 2. 点击看不清 生成新的验证码
            document.getElementById('linkbt').onclick = function(){
                document.getElementById('checkCode').innerText = getCode();
            }

            // 3. 提交时进行对比
            document.getElementById('Button1').onclick = function(){
                var code = document.getElementById('checkCode').innerText;
                var inputCode = document.getElementById('inputCode').value;
                if(code !== inputCode){
                    alert('您输入的验证码不正确');
                    // 不正确的时候清空文本框
                    document.getElementById('inputCode').value = '';
                    return false;
                }             
            }
        }
        
    </script>
</body>
</html>

更多css小动画，js案例点击我的主页

我的主页

好大一个绿菠萝

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
JS 验证码生成及校验（详细注释）

完整代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>验证码生成及校验</title> <link rel="stylesheet" href="style.css"&g...
复制链接

扫一扫