当前位置：首页 > JavaScript

js验证码的实现

2026-02-28 21:13:07JavaScript

验证码的基本概念

验证码（CAPTCHA）用于区分人类用户和自动化程序，防止恶意攻击如暴力破解或垃圾注册。常见的验证码类型包括数字、字母、图形或滑动验证等。

实现数字/字母验证码

生成随机字符串并绘制到画布上，添加干扰元素提高安全性：

function generateCaptcha() {
    const chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    let captcha = "";
    for (let i = 0; i < 6; i++) {
        captcha += chars.charAt(Math.floor(Math.random() * chars.length));
    }

    const canvas = document.getElementById("captchaCanvas");
    const ctx = canvas.getContext("2d");
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 绘制背景和干扰线
    ctx.fillStyle = "#f0f0f0";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    for (let i = 0; i < 5; i++) {
        ctx.strokeStyle = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`;
        ctx.beginPath();
        ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height);
        ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height);
        ctx.stroke();
    }

    // 绘制验证码文本
    ctx.font = "30px Arial";
    ctx.fillStyle = "#000";
    ctx.fillText(captcha, 10, 30);
    return captcha;
}

// 初始化时生成验证码
let currentCaptcha = generateCaptcha();

验证用户输入

比较用户输入与生成的验证码是否匹配：

function validateCaptcha() {
    const userInput = document.getElementById("captchaInput").value;
    if (userInput === currentCaptcha) {
        alert("验证码正确");
    } else {
        alert("验证码错误");
        currentCaptcha = generateCaptcha(); // 重新生成
    }
}

滑动验证码实现

通过拖动滑块完成验证的交互式方案：

let isVerified = false;

function initSliderCaptcha() {
    const slider = document.getElementById("slider");
    const sliderButton = document.getElementById("sliderButton");
    const sliderTrack = document.getElementById("sliderTrack");

    sliderButton.addEventListener("mousedown", (e) => {
        e.preventDefault();
        document.addEventListener("mousemove", moveSlider);
        document.addEventListener("mouseup", stopDrag);
    });

    function moveSlider(e) {
        const maxWidth = slider.offsetWidth - sliderButton.offsetWidth;
        let newPosition = e.clientX - slider.getBoundingClientRect().left;
        newPosition = Math.max(0, Math.min(newPosition, maxWidth));

        sliderButton.style.left = `${newPosition}px`;
        sliderTrack.style.width = `${newPosition}px`;

        if (newPosition >= maxWidth - 5) {
            isVerified = true;
            sliderButton.textContent = "✓";
            stopDrag();
        }
    }

    function stopDrag() {
        document.removeEventListener("mousemove", moveSlider);
        document.removeEventListener("mouseup", stopDrag);

        if (!isVerified) {
            sliderButton.style.left = "0";
            sliderTrack.style.width = "0";
        }
    }
}

图形点选验证码

要求用户点击特定区域完成验证：

function setupImageCaptcha() {
    const captchaImage = document.getElementById("captchaImage");
    captchaImage.addEventListener("click", (e) => {
        const rect = captchaImage.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;

        // 检查点击是否在目标区域内（示例坐标）
        if (x > 100 && x < 150 && y > 50 && y < 100) {
            alert("验证成功");
        } else {
            alert("请点击正确位置");
        }
    });
}