工具类 - 生成图片验证码并验证

最新推荐文章于 2024-05-31 14:02:53 发布

iamlyky

最新推荐文章于 2024-05-31 14:02:53 发布

阅读量241

点赞数

分类专栏：工具类 JavaScript

本文链接：https://blog.youkuaiyun.com/iamlyky/article/details/84827281

版权

工具类同时被 2 个专栏收录

4 篇文章

订阅专栏

JavaScript

2 篇文章

订阅专栏

本文介绍了一种使用前端JavaScript生成图片验证码并进行验证的方法。通过随机生成包含数字和字母的验证码，并将其显示在按钮上，用户输入后进行匹配验证，以确保用户输入正确。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

生成图片验证码并验证

一个简单的前端JS生成验证码并验证功能

<html>  
    <head>
        <title>验证码</title>  
        <style type="text/css">  
        #code
        {
            font-style:italic;
            font-weight:bold;
            border:0;
            letter-spacing:2px;
            color: #4567ff;
            background-color: #e4e4e4;
        }
        </style>
    </head>
    <body>
        <div>
        <form action="***" method='POST' id='loginForm'>
            <input type = "text" id = "inputCode"/>
            <input type = "button" id="code" οnclick="createCode()"/>
            <button type="button" id="submitBtn">登录</button>
        </form>
        </div>
    </body>  
</html>

$(function(){
    createCode();
    var code;
    function createCode() {
        code = "";
        var codeLength = 4;
        var checkCode = document.getElementById("code");

        var random = new Array(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');
        for(var i = 0; i < codeLength; i++) {
            var index = Math.floor(Math.random()*36);
            code += random[index];
        }
        checkCode.value = code;
    }

    $("#submitBtn").click(function () {
        var inputCode = $("#inputCode").val().toUpperCase();
        if(inputCode.length <= 0) {
            alert("请输入验证码");
        } else if(inputCode != code ) {
            alert("验证码输入错误");
            createCode();
            $("#inputCode").val("")
        } else {
            $("#loginForm").submit();
        }
    });
})