JavaScript 实现页面动态验证码功能

最新推荐文章于 2025-04-13 21:29:42 发布

梦幻南瓜

最新推荐文章于 2025-04-13 21:29:42 发布

阅读量616

点赞数 4

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/ybg8912/article/details/145590454

版权

JavaScript 专栏收录该内容

11 篇文章

订阅专栏

验证码（CAPTCHA）是网站常用的一种安全机制，用于区分人类用户和自动化程序（如爬虫、恶意脚本）。通过动态生成验证码，可以有效防止恶意攻击，如暴力破解、垃圾注册等。本文将详细介绍如何使用 JavaScript 实现页面动态验证码功能，并提供完整的代码示例。

1. 验证码的作用

防止自动化攻击：验证码可以有效阻止爬虫、恶意脚本等自动化程序的攻击。
保护用户账户：通过验证码验证用户身份，防止暴力破解密码。
防止垃圾注册：在注册页面使用验证码，防止恶意用户批量注册账号。

2. 实现思路
动态验证码的实现主要包括以下几个步骤：

生成随机验证码：使用 JavaScript 生成随机的字母和数字组合。
绘制验证码图片：将生成的验证码绘制到 Canvas 上，增加干扰元素（如噪点、线条）以提高安全性。
验证用户输入：将用户输入的验证码与生成的验证码进行比较，判断是否正确。

3. 实现步骤

3.1 HTML 结构
首先，创建一个简单的 HTML 页面，包含验证码显示区域、输入框和刷新按钮。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态验证码示例</title>
    <style>
        #captcha {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        #captchaInput {
            padding: 5px;
            font-size: 16px;
        }
        #refreshButton {
            padding: 5px 10px;
            font-size: 16px;
            cursor: pointer;
        }
        .error {
            color: red;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <h1>动态验证码示例</h1>
    <div id="captcha"></div>
    <input type="text" id="captchaInput" placeholder="请输入验证码">
    <button id="refreshButton">刷新验证码</button>
    <p id="errorMessage" class="error"></p>
    <button id="submitButton">提交</button>

    <script src="captcha.js"></script>
</body>
</html>

3.2 JavaScript 实现

接下来，编写 JavaScript 代码实现动态验证码功能。

// captcha.js

// 生成随机验证码
function generateCaptcha() {
    const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    let captcha = "";
    for (let i = 0; i < 6; i++) {  // 生成6位验证码
        captcha += chars[Math.floor(Math.random() * chars.length)];
    }
    return captcha;
}

// 绘制验证码
function drawCaptcha(captcha) {
    const captchaElement = document.getElementById("captcha");
    captchaElement.innerHTML = captcha;
}

// 初始化验证码
let currentCaptcha = generateCaptcha();
drawCaptcha(currentCaptcha);

// 刷新验证码
document.getElementById("refreshButton").addEventListener("click", () => {
    currentCaptcha = generateCaptcha();
    drawCaptcha(currentCaptcha);
    document.getElementById("errorMessage").textContent = "";
});

// 验证用户输入
document.getElementById("submitButton").addEventListener("click", () => {
    const userInput = document.getElementById("captchaInput").value;
    if (userInput === currentCaptcha) {
        document.getElementById("errorMessage").textContent = "验证码正确！";
    } else {
        document.getElementById("errorMessage").textContent = "验证码错误，请重试！";
    }
});

4. 功能详解

generateCaptcha 函数：生成一个包含字母和数字的随机字符串作为验证码。
drawCaptcha 函数：将生成的验证码显示在页面上。
刷新验证码：点击“刷新验证码”按钮时，重新生成并显示新的验证码。
验证用户输入：点击“提交”按钮时，比较用户输入的验证码与生成的验证码是否一致。

5. 增强安全性
为了提高验证码的安全性，可以采取以下措施：

增加干扰元素：

在 Canvas 上绘制验证码时，添加噪点、线条等干扰元素。

示例代码：

function drawCaptchaWithNoise(captcha) {
    const canvas = document.createElement("canvas");
    canvas.width = 200;
    canvas.height = 50;
    const ctx = canvas.getContext("2d");

    // 绘制背景
    ctx.fillStyle = "#f0f0f0";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // 绘制验证码
    ctx.font = "30px Arial";
    ctx.fillStyle = "#000";
    ctx.fillText(captcha, 50, 35);

    // 添加噪点
    for (let i = 0; i < 100; i++) {
        ctx.fillStyle = `rgba(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255}, 0.5)`;
        ctx.fillRect(Math.random() * canvas.width, Math.random() * canvas.height, 2, 2);
    }

    // 添加干扰线
    for (let i = 0; i < 5; i++) {
        ctx.strokeStyle = `rgba(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255}, 0.5)`;
        ctx.beginPath();
        ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height);
        ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height);
        ctx.stroke();
    }

    // 将 Canvas 内容显示在页面上
    const captchaElement = document.getElementById("captcha");
    captchaElement.innerHTML = "";
    captchaElement.appendChild(canvas);
}