当前位置：首页 > jquery

jquery 验证码

2026-03-02 16:25:11jquery

jQuery 验证码实现方法

验证码通常用于防止机器人或自动化脚本提交表单。使用jQuery可以方便地实现验证码功能。

客户端生成验证码

在HTML中添加验证码显示区域和输入框：

<div id="captcha"></div>
<input type="text" id="captchaInput" placeholder="输入验证码">
<button id="refreshCaptcha">刷新验证码</button>

使用jQuery生成随机验证码：

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

var currentCaptcha = generateCaptcha();
$('#captcha').text(currentCaptcha);

$('#refreshCaptcha').click(function() {
    currentCaptcha = generateCaptcha();
    $('#captcha').text(currentCaptcha);
});

验证用户输入

在表单提交时验证用户输入的验证码：

$('#submitBtn').click(function() {
    var userInput = $('#captchaInput').val();
    if (userInput !== currentCaptcha) {
        alert('验证码错误');
        return false;
    }
    // 验证通过，继续提交表单
});

图片验证码实现

对于更安全的验证码，可以使用服务器生成图片验证码：

HTML部分

<img src="captcha.php" id="captchaImage">
<input type="text" id="captchaInput">
<button id="refreshCaptcha">刷新</button>

jQuery代码

$('#refreshCaptcha').click(function() {
    $('#captchaImage').attr('src', 'captcha.php?' + Math.random());
});

$('#submitBtn').click(function() {
    $.post('verify_captcha.php', {
        captcha: $('#captchaInput').val()
    }, function(response) {
        if (response.success) {
            // 验证通过
        } else {
            alert('验证码错误');
        }
    });
});

使用第三方验证码插件

reCAPTCHA是Google提供的免费验证码服务：

注册reCAPTCHA并获取API密钥

在HTML中引入reCAPTCHA：

<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY"></div>

使用jQuery验证：

jquery 验证码

$('#submitBtn').click(function() {
 var response = grecaptcha.getResponse();
 if (response.length === 0) {
     alert('请完成验证码');
     return false;
 }

 $.post('verify_recaptcha.php', {
     'g-recaptcha-response': response
 }, function(data) {
     if (data.success) {
         // 验证通过
     } else {
         alert('验证失败');
     }
 });
});