当前位置：首页 > jquery

jquery验证码

2026-03-02 16:23:37jquery

jQuery 验证码实现方法

jQuery 可用于前端验证码的生成和验证，以下是几种常见的实现方式：

使用 Canvas 生成图形验证码

通过 jQuery 结合 Canvas 可以生成包含随机字符的图形验证码：

jquery验证码

$(document).ready(function() {
    // 生成验证码
    function generateCaptcha() {
        var canvas = document.getElementById('captchaCanvas');
        var ctx = canvas.getContext('2d');
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
        var captcha = '';

        // 生成4位随机验证码
        for (var i = 0; i < 4; i++) {
            var index = Math.floor(Math.random() * chars.length);
            captcha += chars.substring(index, index + 1);
        }

        // 绘制验证码
        ctx.font = '30px Arial';
        ctx.fillStyle = '#333';
        ctx.fillText(captcha, 10, 30);

        // 添加干扰线
        for (var i = 0; i < 5; i++) {
            ctx.strokeStyle = '#ccc';
            ctx.beginPath();
            ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height);
            ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height);
            ctx.stroke();
        }

        return captcha;
    }

    var currentCaptcha = generateCaptcha();

    // 刷新验证码
    $('#refreshCaptcha').click(function() {
        currentCaptcha = generateCaptcha();
    });

    // 验证验证码
    $('#submitBtn').click(function() {
        var userInput = $('#captchaInput').val();
        if (userInput === currentCaptcha) {
            alert('验证码正确');
        } else {
            alert('验证码错误');
            currentCaptcha = generateCaptcha();
        }
    });
});

使用第三方 jQuery 插件

jQuery 有许多验证码插件可以简化实现：

jQuery Captcha 插件：

jquery验证码

$('#form').captcha({
 captchaUrl: 'captcha.php',
 captchaField: 'captcha',
 submitButton: '#submit'
});

reCAPTCHA jQuery 插件：

$('#form').recaptcha({
 sitekey: 'your-site-key',
 theme: 'light'
});

使用 AJAX 验证验证码

前端生成验证码后，可以通过 AJAX 与后端验证：

$('#verifyCaptcha').click(function() {
    var captchaText = $('#captchaText').val();
    $.ajax({
        url: 'verify_captcha.php',
        type: 'POST',
        data: { captcha: captchaText },
        success: function(response) {
            if (response.valid) {
                $('#message').text('验证码正确').css('color', 'green');
            } else {
                $('#message').text('验证码错误').css('color', 'red');
            }
        }
    });
});