好的，以下是一个简单的
验证码
验证页面的示例代码：
HTML代码：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
验证码
验证</title>
</head>
<body>
<h1>
验证码
验证</h1>
<p>请输入下面
图片中显示的
验证码：</p>
<img id="captchaImg" src="captcha.
php" alt="
验证码">
<br>
<input type="text" id="captchaInput">
<button id="verifyBtn">
验证</button>
<p id="result"></p>
<script src="verify.js"></script>
</body>
</html>
```
在上面的代码中，我们使用了一个 `img` 标签来展示
验证码
图片，并且在 `input` 标签中输入
验证码。我们还添加了一个 “
验证” 按钮，并在页面底部显示
验证结果。
JavaScript代码：
```js
const captchaInput = document.querySelector('#captchaInput');
const verifyBtn = document.querySelector('#verifyBtn');
const result = document.querySelector('#result');
verifyBtn.addEventListener('click', () => {
const captchaText = captchaInput.value;
fetch(`verify.
php?captcha=${captchaText}`)
.then(response => response.json())
.then(data => {
if (data.valid) {
result.textContent = '
验证成功！';
} else {
result.textContent = '
验证码错误，请重新输入！';
}
})
.catch(error => console.error(error));
});
```
在上面的代码中，我们首先使用 `querySelector` 方法获取了
验证码输入框、
验证按钮和结果显示区域的元素。然后，我们添加了一个 “
验证” 按钮的 `click` 事件监听器。当用户点击该按钮时，我们会获取用户输入的
验证码文本，并使用 `fetch` 方法将
验证码文本提交给服务器进行
验证。
在服务器端，我们可以使用
PHP 或其它语言来生成和
验证验证码。以下是一个简单的
PHP 代码示例：
```
php
<?
php
session_start();
function generateCaptcha($length = 6) {
$characters = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
$captcha = '';
for ($i = 0; $i < $length; $i++) {
$captcha .= $characters[rand(0, strlen($characters) - 1)];
}
$_SESSION['captcha'] = $captcha;
return $captcha;
}
function verifyCaptcha($captcha) {
if (isset($_SESSION['captcha']) && strtolower($captcha) == strtolower($_SESSION['captcha'])) {
return true;
} else {
return false;
}
}
if (isset($_GET['captcha'])) {
$valid = verifyCaptcha($_GET['captcha']);
echo json_encode(array('valid' => $valid));
} else {
generateCaptcha();
header('Content-type: image/png');
$image = imagecreate(100, 30);
$text_color = imagecolorallocate($image, 0, 0, 0);
imagestring($image, 5, 5, 5, $_SESSION['captcha'], $text_color);
imagepng($image);
imagedestroy($image);
}
```
在上面的
PHP 代码中，我们使用了 `session_start` 函数来启用会话，并使用 `generateCaptcha` 函数来生成
验证码并将其保存在会话中。我们还使用 `verifyCaptcha` 函数来
验证用户输入的
验证码是否与保存在会话中的
验证码相同。当用户提交
验证码文本时，我们会调用 `verifyCaptcha` 函数进行
验证，并将
验证结果以 JSON 格式返回给客户端。
如果用户访问 `captcha.
php` 页面时没有传递 `captcha` 参数，我们会生成一个新的
验证码并将其显示在一个 PNG
图片中。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
373
