jquery实现文字点选验证码

news2025/5/10 10:24:21

文字点选验证码是一种有效的防止自动化攻击的手段。用户需要按照提示顺序点击特定的文字，验证通过后才能进行下一步操作。本文将详细介绍如何使用jQuery实现这种验证码。

一、实现思路

生成验证码：随机生成一组文字，并随机排列在验证码区域中。
用户交互：用户按照提示顺序点击文字。
验证点击顺序：检测用户点击的文字顺序是否正确。
反馈结果：根据点击结果给出反馈，成功则允许下一步操作，失败则重新生成验证码。

二、前端代码

1. HTML结构

首先，创建一个简单的HTML结构，包括验证码显示区域和提示信息。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字点选验证码</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="captcha-container">
        <div id="captcha-instructions"></div>
        <div id="captcha"></div>
        <button id="submit-button">提交</button>
        <div id="feedback"></div>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

2. CSS样式

使用CSS来美化验证码的显示。

/* styles.css */
#captcha-container {
    text-align: center;
    margin-top: 50px;
}

#captcha {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 20px 0;
}

.captcha-char {
    font-size: 24px;
    margin: 10px;
    cursor: pointer;
    user-select: none;
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.captcha-char.selected {
    background-color: #ddd;
}

#feedback {
    margin-top: 20px;
    font-size: 18px;
    color: red;
}

3. jQuery脚本

编写jQuery脚本，实现验证码的生成、点击和验证逻辑。

// script.js
$(document).ready(function() {
    var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    var captchaChars = [];
    var selectedChars = [];
    var correctOrder = [];

    function generateCaptcha() {
        $('#captcha').empty();
        captchaChars = [];
        selectedChars = [];
        correctOrder = [];

        for (var i = 0; i < 6; i++) {
            var char = chars.charAt(Math.floor(Math.random() * chars.length));
            captchaChars.push(char);
        }

        correctOrder = captchaChars.slice();
        correctOrder.sort(() => Math.random() - 0.5);

        $('#captcha-instructions').text('请按以下顺序点击: ' + correctOrder.join(' '));

        for (var i = 0; i < captchaChars.length; i++) {
            $('#captcha').append('<div class="captcha-char" data-char="' + captchaChars[i] + '">' + captchaChars[i] + '</div>');
        }
    }

    function checkSelection() {
        if (selectedChars.length === correctOrder.length) {
            if (selectedChars.join('') === correctOrder.join('')) {
                $('#feedback').text('验证通过').css('color', 'green');
            } else {
                $('#feedback').text('验证失败，请重试').css('color', 'red');
                generateCaptcha();
            }
        }
    }

    $('#captcha').on('click', '.captcha-char', function() {
        var char = $(this).data('char');
        if (!$(this).hasClass('selected')) {
            selectedChars.push(char);
            $(this).addClass('selected');
        }
        checkSelection();
    });

    $('#submit-button').on('click', function() {
        if (selectedChars.length !== correctOrder.length || selectedChars.join('') !== correctOrder.join('')) {
            $('#feedback').text('验证失败，请重试').css('color', 'red');
            generateCaptcha();
        } else {
            $('#feedback').text('验证通过').css('color', 'green');
        }
    });

    generateCaptcha();
});

详细步骤解析

生成验证码：
- 随机选择字符组成验证码字符数组 captchaChars。
- 将字符数组打乱顺序生成 correctOrder，并在提示信息中显示。
用户点击交互：
- 监听验证码字符的点击事件。
- 点击后将字符添加到用户选择的数组 selectedChars，并标记为已选中。
验证点击顺序：
- 每次点击后检查 selectedChars的长度是否与 correctOrder相等。
- 如果相等，比较两个数组是否一致。
- 如果一致，显示验证通过信息；如果不一致，重置验证码并提示重新尝试。
提交按钮：
- 点击提交按钮时，再次验证用户点击顺序是否正确。