当前位置：首页 > jquery

jquery 验证码

2026-01-16 14:53:44jquery

jQuery 验证码实现方法

使用 jQuery 实现验证码功能可以通过多种方式完成，包括生成图形验证码、短信验证码或简单的逻辑验证码。以下是几种常见的实现方法：

图形验证码生成

图形验证码通常结合后端生成，前端通过 jQuery 显示和验证。以下是一个简单的实现流程：

后端生成验证码
后端（如 PHP、Node.js）生成随机字符串并绘制为图片，同时将验证码字符串存入 Session 或缓存。

前端显示验证码
通过 jQuery 动态加载验证码图片，并绑定点击事件实现刷新功能：

$('#captcha-img').attr('src', '/captcha.php?' + Math.random());
$('#captcha-img').click(function() {
    $(this).attr('src', '/captcha.php?' + Math.random());
});

验证用户输入
提交表单时，通过 AJAX 或表单提交验证用户输入的验证码是否与 Session 中存储的一致：

$('#submit-btn').click(function() {
    var userInput = $('#captcha-input').val();
    $.post('/validate-captcha', { captcha: userInput }, function(response) {
        if (response.valid) {
            alert('验证成功');
        } else {
            alert('验证码错误');
        }
    });
});

短信/邮箱验证码

短信或邮箱验证码通常需要后端支持发送，前端通过 jQuery 控制发送逻辑和倒计时：

发送验证码
点击发送按钮时触发 AJAX 请求，后端发送验证码到用户手机或邮箱：

$('#send-code').click(function() {
    var phone = $('#phone').val();
    $.post('/send-sms', { phone: phone }, function(response) {
        if (response.success) {
            startCountdown();
        }
    });
});

倒计时功能
使用 jQuery 实现按钮禁用和倒计时显示：

function startCountdown() {
    var countdown = 60;
    var timer = setInterval(function() {
        countdown--;
        $('#send-code').text(countdown + '秒后重试').prop('disabled', true);
        if (countdown <= 0) {
            clearInterval(timer);
            $('#send-code').text('获取验证码').prop('disabled', false);
        }
    }, 1000);
}

简单逻辑验证码

对于轻量级验证，可以使用纯前端逻辑验证码，例如数学运算验证：

生成随机问题
动态生成简单的数学问题并显示：

var num1 = Math.floor(Math.random() * 10);
var num2 = Math.floor(Math.random() * 10);
$('#captcha-question').text(num1 + ' + ' + num2 + ' = ?');

验证答案
提交时检查用户输入是否与正确答案匹配：

$('#submit-btn').click(function() {
    var answer = parseInt($('#captcha-answer').val());
    if (answer === num1 + num2) {
        alert('验证成功');
    } else {
        alert('验证失败');
    }
});