当前位置：首页 > news >正文

PHP验证码生成与测试

news 2025/9/24 7:12:27

PHP验证码生成与测试

<?php
session_start();
require_once 'Captcha.php';$message = '';
$success = false;// 检查表单提交
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['captcha'])) {if (Captcha::validate($_POST['captcha'])) {$message = '验证码正确！';$success = true;} else {$message = '验证码错误，请重试！';}
}
?><!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>验证码测试</title><style>body {font-family: Arial, sans-serif;max-width: 500px;margin: 50px auto;padding: 20px;text-align: center;}.captcha-img {margin: 20px 0;border: 1px solid #ddd;cursor: pointer;height: 50px; /* 固定高度避免布局跳动 */}.message {padding: 10px;margin: 10px 0;border-radius: 4px;}.success {background-color: #dff0d8;color: #3c763d;}.error {background-color: #f2dede;color: #a94442;}</style>
</head>
<body><h1>验证码测试</h1><?php if ($message): ?><div class="message <?= $success ? 'success' : 'error' ?>"><?= htmlspecialchars($message) ?></div><?php endif; ?><form method="POST" action=""><div><!-- 只保留一个验证码图片元素 --><img id="captcha-image" class="captcha-img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt="验证码" title="点击刷新验证码"></div><div><input type="text" name="captcha" placeholder="请输入验证码" required></div><div><button type="submit">提交验证</button><button type="button" id="refresh-btn">刷新验证码</button></div></form><script>const captchaImage = document.getElementById('captcha-image');const refreshBtn = document.getElementById('refresh-btn');// 获取验证码Base64async function refreshCaptcha() {try {const timestamp = Date.now();const response = await fetch(`generate_captcha.php?t=${timestamp}`);const blob = await response.blob();return new Promise((resolve) => {const reader = new FileReader();reader.onload = () => {captchaImage.src = reader.result;};reader.readAsDataURL(blob);});} catch (error) {console.error('刷新验证码失败:', error);}}// 初始加载和点击刷新refreshCaptcha();captchaImage.addEventListener('click', refreshCaptcha);refreshBtn.addEventListener('click', refreshCaptcha);</script>
</body>
</html>