php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】

当网站需要设计一些用户交互功能时，拖动滑块验证码是一种比较常见的方式。通过使用PHP和JS的结合，可以实现一个简单的拖动滑块验证码验证表单操作。以下是完整攻略。

环境准备

1. 安装PHP
2. 安装Web服务器（如Apache）
3. 在服务器上安装MySQL

实现步骤

1. 创建数据库表

为了实现验证码的验证功能，我们需要在数据库中存储用户的滑块位置以及生成的验证码，因此，首先需要在MySQL中创建一个数据表，用于存储这些数据。

CREATE TABLE `captcha` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `session_id` varchar(32) NOT NULL,
  `captcha_value` varchar(32) NOT NULL,
  `slider_position` int(11) NOT NULL,
  `create_time` datetime NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

1. 创建验证码生成函数

在PHP中，可以使用GD库生成一个包含随机文本的图像，用于生成验证码。以下是一个示例函数，用于生成验证码图像并返回图像的二进制数据。

function generateCaptchaImage($length = 6) {
    // 设置文本内容
    $characters = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
    $captcha_data = substr(str_shuffle($characters), 0, $length);

    // 在图像上绘制文本
    $img = imagecreate(100, 50);
    $bg_color = imagecolorallocate($img, 255, 255, 255);
    $text_color = imagecolorallocate($img, 0, 0, 0);
    imagestring($img, 5, 25, 20, $captcha_data, $text_color);

    // 输出图像
    ob_start();
    imagepng($img);
    $captcha_image_data = ob_get_contents();
    ob_end_clean();

    return $captcha_image_data;
}

1. 生成验证码

在PHP脚本中调用生成验证码函数，用于返回一个包含随机文本的图像，将生成的验证码数据存储到数据库中。可以使用PHP的session机制，将生成的验证码与当前用户的会话ID进行绑定。

$captcha_image_data = generateCaptchaImage();
$captcha_value = bin2hex(random_bytes(16));
$slider_position = 0;
$session_id = session_id();
$create_time = date('Y-m-d H:i:s');

$sql = "INSERT INTO captcha (session_id, captcha_value, slider_position, create_time) VALUES ('$session_id', '$captcha_value', $slider_position, '$create_time')";
mysqli_query($db_conn, $sql);

echo json_encode(array(
    'status' => 'success',
    'captcha_image' => base64_encode($captcha_image_data),
    'captcha_value' => $captcha_value
));

1. 验证用户信息

在用户填写表单时，需要对用户提供的验证码和滑块位置进行验证。可以使用JavaScript监听用户的拖动事件，获取到滑块的位置信息。在用户提交表单时，向PHP服务器发送滑块位置和验证码数据，进行验证。以下是一个展示如何监听用户拖动事件的JavaScript示例。

var slider = document.querySelector('#slider');

slider.addEventListener('mousedown', function (event) {
    var initialPosition = event.pageX;

    document.addEventListener('mousemove', function onMouseMove(event) {
        var sliderPosition = event.pageX - initialPosition;
        slider.style.transform = 'translateX(' + sliderPosition + 'px)';

        document.addEventListener('mouseup', function onMouseUp(event) {
            document.removeEventListener('mousemove', onMouseMove);
            document.removeEventListener('mouseup', onMouseUp);

            // 向服务器验证数据
            validateCaptcha(sliderPosition);
        });
    });
});

1. PHP数据验证

在PHP服务器接收到用户提交的验证数据时，需要将提交的滑块位置与存储在数据库中的滑块位置进行比较。如果两个位置相等，则验证通过。

$session_id = session_id();
$captcha_value = $_POST['captcha_value'];
$slider_position = intval($_POST['slider_position']);

$sql = "SELECT slider_position FROM captcha WHERE session_id = '$session_id' AND captcha_value = '$captcha_value'";
$result = mysqli_query($db_conn, $sql);
if ($result && $row = mysqli_fetch_assoc($result)) {
    $stored_slider_position = intval($row['slider_position']);
    if ($slider_position === $stored_slider_position) {
        // 验证成功
    } else {
        // 验证失败
    }
} else {
    // 验证失败
}

示例说明

示例1

下面的示例演示了如何生成一个随机文本的图像验证码，并将图像返回给用户。

$captcha_image_data = generateCaptchaImage();
$captcha_value = bin2hex(random_bytes(16));
$slider_position = 0;
$session_id = session_id();
$create_time = date('Y-m-d H:i:s');

$sql = "INSERT INTO captcha (session_id, captcha_value, slider_position, create_time) VALUES ('$session_id', '$captcha_value', $slider_position, '$create_time')";
mysqli_query($db_conn, $sql);

echo json_encode(array(
    'status' => 'success',
    'captcha_image' => base64_encode($captcha_image_data),
    'captcha_value' => $captcha_value
));

该示例中生成了一个验证码，将生成的验证码存储到数据库中，并将图像返回给用户。

示例2

下面的示例演示了如何验证用户提供的拖动滑块位置数据是否正确。

$session_id = session_id();
$captcha_value = $_POST['captcha_value'];
$slider_position = intval($_POST['slider_position']);

$sql = "SELECT slider_position FROM captcha WHERE session_id = '$session_id' AND captcha_value = '$captcha_value'";
$result = mysqli_query($db_conn, $sql);
if ($result && $row = mysqli_fetch_assoc($result)) {
    // 比较用户提供的滑块位置与存储在数据库中的滑块位置
    $stored_slider_position = intval($row['slider_position']);
    if ($slider_position === $stored_slider_position) {
        // 验证成功
    } else {
        // 验证失败
    }
} else {
    // 验证失败
}

该示例中将用户提交的滑块位置与存储在数据库中的滑块位置进行比较，从而进行验证码的验证操作。