好的，我可以帮你实现这个功能。首先，你需要一个生成验证码的函数，可以使用 Python 的 Pillow 库来生成图片验证码。以下是生成验证码的示例
代码：
```python
from PIL import Image, ImageDraw, ImageFont
import random
def generate_code():
# 随机生成 4 位验证码
code = ''.join(random.sample('0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ', 4))
# 创建一个 120x50 的黑色背景图像
img = Image.new('RGB', (120, 50), (0, 0, 0))
# 获取一个绘图对象
draw = ImageDraw.Draw(img)
# 设置字体
font = ImageFont.truetype('arial.ttf', 36)
# 绘制文本
draw.text((10, 5), code, font=font, fill=(255, 255, 255))
# 添加干扰线
for i in range(random.randint(3, 5)):
line_color = (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255))
xy = (random.randint(0, 120), random.randint(0, 50), random.randint(0, 120), random.randint(0, 50))
draw.line(xy, fill=line_color, width=2)
# 添加干扰点
for i in range(random.randint(50, 100)):
point_color = (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255))
xy = (random.randint(0, 120), random.randint(0, 50))
draw.point(xy, fill=point_color)
# 保存图像
img.save('code.png')
# 返回验证码值
return code
```
接下来，你需要一个 HTML 页面，用来显示验证码和验证结果。以下是 HTML
代码示例：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>验证码页面</title>
<script src="https://cdn.bootcdn.net/
ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function () {
// 验证码图片点击事件
$('#code-img').click(function () {
// 刷新验证码
$(this).attr('src', '/code?_=' + Math.random());
});
// 确定按钮点击事件
$('#submit-btn').click(function () {
// 获取用户输入的验证码和用户名
var code = $('#code-input').val();
var username = $('#username-input').val();
//
发送 AJAX 请求验证
$.
ajax({
url: '/check',
type: 'POST',
data: {'code': code, 'username': username},
success: function (data) {
if (data['result']) {
// 验证成功
alert('验证成功！');
} else {
// 验证失败
alert('验证失败！');
}
}
});
});
});
</script>
</head>
<body>
<h1>验证码页面</h1>
<p>请输入用户名和验证码：</p>
<p>用户名：<input type="text" id="username-input"></p>
<p>验证码：<input type="text" id="code-input"><img src="/code" id="code-img"></p>
<button id="submit-btn">确定</button>
</body>
</html>
```
这个页面有一个输入框和一个验证码图片，当用户单击图片时，会生成一个新的验证码图片。当用户单击确定按钮时，会
发送 AJAX 请求到服务器端验证验证码和用户名。
最后，你需要一个服务器端程序，用来生成验证码和验证用户输入的验证码和用户名。以下是 Python Flask 框架的示例
代码：
```python
from flask import Flask, request, send_file, jsonify
import os
app = Flask(__name__)
# 生成验证码
@app.route('/code')
def get_code():
code = generate_code()
return send_file('code.png')
# 验证用户输入的验证码和用户名
@app.route('/check', methods=['POST'])
def check_code():
code = request.form['code']
username = request.form['username']
if code == '' or username == '':
# 验证码或用户名为空
result = False
elif code.lower() == session.get('code', '').lower() and username == 'admin':
# 验证码和用户名都正确
result = True
else:
# 验证码或用户名错误
result = False
return jsonify({'result': result})
if __name__ == '__main__':
app.secret_key = os.urandom(24)
app.run(debug=True)
```
这个程序有两个路由，一个用来生成验证码图片，一个用来验证用户输入的验证码和用户名。当用户单击验证码图片时，会调用 `get_code()` 函数生成一个新的验证码图片，并返回给
客户端。当用户单击确定按钮时，会调用 `check_code()` 函数验证用户输入的验证码和用户名，并返回验证结果。
请注意，这个程序使用 Flask 框架和 session 变量来保存验证码值，你需要安装 Flask 和 Pillow 库来运行这个程序。你也可以使用其他框架和库来实现相同的功能。
扫一扫
1653
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
