在网页上使用图形验证码主要是为了提高站点的安全性,避免网页被恶意重复提交。请结合JavaScript脚本和GD2函数设计一个可刷新图形验证码(保证验证码为4位),其运行结果如图所示。并输出验证结果。
时间: 2024-05-13 15:14:18 浏览: 135
好的,我来为您介绍一下实现思路。
首先,我们需要使用PHP的GD库来生成验证码图片,然后在前端使用JavaScript来实现刷新验证码和验证验证码的功能。
1. 生成验证码图片
使用GD库可以方便的生成验证码图片,具体实现如下:
```php
<?php
// 开启session
session_start();
// 生成随机验证码
$code = rand(1000, 9999);
// 存储验证码到session中
$_SESSION['code'] = $code;
// 创建画布
$img = imagecreatetruecolor(80, 30);
// 设置背景色和文字颜色
$bgColor = imagecolorallocate($img, 255, 255, 255);
$textColor = imagecolorallocate($img, 0, 0, 0);
// 填充背景色
imagefill($img, 0, 0, $bgColor);
// 在画布上写入验证码
imagestring($img, 5, 20, 5, $code, $textColor);
// 输出图像
header('Content-Type: image/png');
imagepng($img);
// 释放资源
imagedestroy($img);
?>
```
2. 在前端显示验证码
在前端使用以下代码来显示验证码图片:
```html
<img id="codeImg" src="captcha.php" alt="验证码" />
```
其中,`captcha.php`是上一步生成验证码图片的PHP脚本。
3. 刷新验证码
在点击刷新按钮时,使用以下代码来重新加载验证码图片:
```javascript
document.getElementById("codeImg").src = "captcha.php?" + Math.random();
```
其中,`Math.random()`可以在URL后面加上一个随机数来避免浏览器缓存图片。
4. 验证验证码
在用户提交表单时,使用以下代码来验证验证码是否正确:
```javascript
var code = document.getElementById("code").value;
if (code === "<?php echo $_SESSION['code']; ?>") {
// 验证码正确
} else {
// 验证码错误
}
```
其中,`code`是用户输入的验证码,`<?php echo $_SESSION['code']; ?>`是PHP代码,用来输出上一步存储在session中的验证码。这样就可以在前端通过JavaScript来验证验证码是否正确了。
完整的代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<title>刷新验证码示例</title>
<meta charset="UTF-8">
<script>
function refreshCode() {
document.getElementById("codeImg").src = "captcha.php?" + Math.random();
}
function submitForm() {
var code = document.getElementById("code").value;
if (code === "<?php echo $_SESSION['code']; ?>") {
alert("验证码正确");
} else {
alert("验证码错误");
}
}
</script>
</head>
<body>
<form>
<p>
<label for="code">验证码:</label>
<input type="text" id="code" name="code" maxlength="4" />
<img id="codeImg" src="captcha.php" alt="验证码" />
<a href="javascript:void(0);" onclick="refreshCode();">刷新</a>
</p>
<p>
<input type="button" value="提交" onclick="submitForm();" />
</p>
</form>
</body>
</html>
```
注意,在使用验证码之前,需要先开启session,代码如下:
```php
session_start();
```
以上就是一个可刷新图形验证码的实现方式了。
阅读全文