Ajax 验证用户输入的验证码是否与随机生成的一致

生成验证码

首先，我们需要生成一个随机的验证码并将其返回给前端。可以使用PHP的GD库来生成一个带有随机数字的图片，也可以直接生成一个包含随机数字的字符串。以下是一个例子：

<?php
session_start();

// 生成随机的验证码
$code = rand(1000,9999);

// 将验证码存储到session中
$_SESSION['code'] = $code;

// 生成验证码图片
header('Content-Type: image/png');
$image = imagecreate(60, 30);
$bg_color = imagecolorallocate($image, 255, 255, 255);
$text_color = imagecolorallocate($image, 0, 0, 0);
imagestring($image, 10, 10, 5, $code, $text_color);
imagepng($image);
imagedestroy($image);
?>

在上面的代码中，我们使用session_start()函数开启会话，并使用rand()函数生成一个四位的随机数字。然后将验证码存储到$_SESSION数组中供后续验证使用。最后使用GD库创建一个60x30的PNG格式的图片，将验证码绘制在图片上并输出。

验证用户输入的验证码

生成验证码后，我们需要在用户提交表单时验证输入的验证码是否和之前生成的一致。以下是一个基于Ajax方式验证验证码的例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Ajax验证验证码Demo</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
    <form>
        <input type="text" name="code" id="code" placeholder="请输入验证码">
        <img src="captcha.php" onclick="this.src='captcha.php?'+Math.random()">
        <button type="button" id="submit">提交</button>
    </form>
    <script>
        $(document).ready(function() {
            $('#submit').click(function() {
                var code = $('#code').val();
                $.post('check_code.php', { code: code }, function(response) {
                    if (response == 'match') {
                        alert('验证码匹配');
                    } else {
                        alert('验证码不匹配');
                    }
                });
            });
        });
    </script>
</body>
</html>

在上面的例子中，我们在表单中添加了一个文本框用于输入验证码，一个img标签用于显示验证码图片，以及一个提交按钮。当用户单击验证码图片时，会刷新验证码图片。当用户点击提交按钮时，会使用Ajax方式将用户输入的验证码发送到check_code.php进行验证，服务器会返回一个字符串表示匹配结果。若匹配，则显示“验证码匹配”，否则显示“验证码不匹配”。

下面是check_code.php的代码：

<?php
session_start();
if ($_POST['code'] == $_SESSION['code']) {
    echo 'match';
} else {
    echo 'not match';
}
?>

在上面的代码中，我们首先使用session_start()函数开启会话，然后检查用户输入的验证码是否和之前生成的一致，根据结果返回一个字符串表示匹配的结果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Ajax 验证用户输入的验证码是否与随机生成的一致 - Python技术站

Ajax 验证用户输入的验证码是否与随机生成的一致

相关文章