纯JS实现验证码生成与检验

最新推荐文章于 2023-08-22 21:13:04 发布

中南滴水哥

最新推荐文章于 2023-08-22 21:13:04 发布

阅读量1k

点赞数 1

分类专栏：前端文章标签： css js javascript html

本文链接：https://blog.csdn.net/qq_43742385/article/details/111561021

版权

前端专栏收录该内容

53 篇文章 2 订阅

订阅专栏

纯JS实现验证码生成与检验

使用语言：HTML+CSS+JS
开发工具：VSCode
功能说明：可以实现验证码的自动产生，可以切换验证码，同时可以进行验证码的检验
效果展示：
构建思路：使用数组来进行验证码的产生，当点击后调用产生验证码的函数更新验证码，检验时通过获取验证码和用户输入的验证码进行比对，成功就弹出成功，失败就清空验证码输入框。
项目源码

<!--
 * @Author: CSU_XZY
 * @Date: 2020-12-22 15:28:30
 * @LastEditors: CSU_XZY
 * @LastEditTime: 2020-12-22 16:28:27
 * @FilePath: \第二天c:\Users\XZY\Desktop\前端\JavaScript\JS实战案例\2、验证码\autoCode.html
 * @Description: just to play
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>验证码</title>
</head>
<style>
    *{
        padding: 0px;
        margin: 0px;
    }
    .box{
        height: 300px;
        width: 200px;
        margin: 20px auto;
    }
    .box>input{
        margin-left: 50px;
    }
    #code{
        background:#eee;
        font-size: 25px;
        margin-right: 6px;
        color: blue;
        cursor: pointer;
    }
    .show{
        height: 40px;
        width: auto;
    }
    .show button{
        height: 30px;
        background-color: #eee;
        border: black solid 1px;
        border-radius: 10px;
        font-size: 10px;
    }
    .input{
        height: 40px;
        width: auto;
        margin-top: 10px;
    }
    .input label{
        float: left;
        margin-right: 10px;
        font-size: 20px;
    }
    #checkCode{
        width: 80px;
        height: 20px;
        float: left;
    }
</style>
<body>
    <div class="box">
        <div class="show">
            <span id="code"></span>
            <button id="change">看不清，换一张</button>
        </div>
        <div class="input">
            <label for="checkCode">验证码:</label>
            <input type="text" id="checkCode">
        </div>
        <input type="button" value="确定" id="confirm">
    </div>
</body>
</html>
<script>
    window.onload = function(){
        var s = getCode();
        function getCode(){
            var array = ['1','2','3','4','5','6','7','8','9','a','b','c','e','f'];
            var str = '';
            for(let i = 0; i < 4; i++)
            {
                var index = parseInt((Math.random()*14));
                str+=array[index];
            }
            return str;
        }
        document.getElementById('code').innerText = s;

        document.getElementById('change').onclick = function(){
                document.getElementById('code').innerText = getCode();
        }

        document.getElementById('confirm').onclick = function(){
            var x = document.getElementById('checkCode').value;
            var y = document.getElementById('code').innerText;
            if(x == y)
            alert("验证成功");
            else
            {
                alert("验证码输入错误");
                document.getElementById('checkCode').value = '';
            }
        }
    } 
</script>

中南滴水哥

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
纯JS实现验证码生成与检验

纯JS实现验证码生成与检验使用语言：HTML+CSS+JS开发工具：VSCode功能说明：可以实现验证码的自动产生，可以切换验证码，同时可以进行验证码的检验效果展示：构建思路：使用数组来进行验证码的产生，当点击后调用产生验证码的函数更新验证码，检验时通过获取验证码和用户输入的验证码进行比对，成功就弹出成功，失败就清空验证码输入框。项目源码<!-- * @Author: CSU_XZY * @Date: 2020-12-22 15:28:30 * @LastEditors: CS
复制链接

扫一扫