flask-wtf表单验证与pillow图形验证码

本文主要是介绍flask-wtf表单验证与pillow图形验证码，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

flask-wtf用来验证表单数据，pillow用来生成图片验证码

1. 安装

pip install flask-wtf
pip install pillow

编写

在flask项目下创建form.py，表单验证类

from flask_wtf import FlaskForm  # 继承的父类
from wtforms import StringField, PasswordField, DateField  # 字段
from wtforms.validators import DataRequired, Length, ValidationError, EqualTo  # 验证器
import re
from flask_wtf.file import FileField, FileRequired, FileAllowed  # 文件上传
from exts import cache  # 缓存# 定义表单验证类
class UserRegisterForm(FlaskForm):'''用户登录表单验证'''# <input type="text">                           必填                   长度username = StringField(label='用户名', validators=[DataRequired(), Length(max=10, message='名字太长了')])password = PasswordField('password', validators=[DataRequired(), Length(min=6, message='密码太短了')])password2 = PasswordField('password', validators=[DataRequired(),# 判断两个字段是否一致EqualTo(fieldname='password', message='两次密码不一致')])phone = StringField(label='手机号', validators=[DataRequired(), Length(max=11, min=11, message='11位手机号')])# 文件上传                                                                              内部自动转换成小写icon = FileField(label='头像', validators=[FileRequired(message='未上传'), FileAllowed(['png', 'jpg', 'gif'], message='文件格式不对')])# 验证码yzm = StringField(validators=[DataRequired(message='请输入验证码')])def validate_yzm(self, data):'''对比验证码'''code = cache.get('code')input_code = data.data# 转换成小写验证if code != input_code:raise ValidationError('验证码错误')# 单字段验证：validate_字段名def validate_username(self, data):# self.username跟data是同一个对象if data.data[0].isdigit():  # 查看第一位是否是数字raise ValidationError('不能以数字开头')def validate_phone(self, data):'''正则验证手机号'''phone = data.dataif not re.search(r'^1[3875]\d{9}$', phone):raise ValidationError('手机号格式不对')

在flask项目下创建generate_img.py，生成图片验证码

from PIL import Image, ImageFont, ImageDraw, ImageFilter
import randomdef random_RGB():'''随机生成RGB'''return (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255))def yzm():'''生成图片验证码'''s = 'qwertyuiop1234567890lkjhgfdsazxcvbnm'   # 26个单词跟0-9数字size = (120, 60)  # 图片大小yzm_img = Image.new('RGB', size, color=random_RGB())  # 生成画布，随机生成RGB颜色my_font = ImageFont.truetype('static/fonts/ARIALUNI.TTF', size=50)  # 添加字体文件，字体大小draw = ImageDraw.Draw(yzm_img)  # 创建画图对象code = ''  # 初始化验证码# 开始绘制for i in range(4):t = random.choice(s)  # 从s里面随机选取一个code += t  # 保存验证码，后面用来跟前端的比较# xy坐标,注意字体间隔                  字体        字体颜色draw.text(xy=(i*30, 0), text=t, font=my_font, fill=random_RGB())# 画干扰线for j in range(5):draw.line(xy=((5, random.randint(10, 55)), (115, random.randint(10, 50))), fill=random_RGB())# 添加滤镜yzm_img = yzm_img.filter(ImageFilter.DETAIL)return code, yzm_imgif __name__ == '__main__':code, yzm_img = yzm()# yzm_img.show()

在视图使用

from flask import render_template, make_response
import os, io
from utils.generate_img import yzm  # 验证码
from .form import UserRegisterForm  # 表单验证
from exts import cache  # 缓存# url_prefix为路由前导，以下路由全部要加路由前导,例如：/user/register
user_bp = Blueprint('user', __name__, url_prefix='/user')# 表单验证测试
@user_bp.route('/test_register', methods=['GET', 'POST'])
def test_register():form = UserRegisterForm()if form.validate_on_submit():  # 验证表单# 接收表单数据password = form.password.data  # flask_wtf的表单接收可以这样phone = request.form.get('phone')icon = form.icon.data# 保存图片文件filename = secure_filename(icon.filename)  # 返回一个安全的文件名path = os.path.join(settings.BASE_DIR, 'test\\')  # C:\Users\zhang\Desktop\flask_blog\testicon.save(path + filename)  # 保存文件# print(filename, path)return 'ok'return render_template('test/register.html', form=form)@user_bp.route('/get_img')
def get_img():'''返回一个图形验证码'''# 调用生成图片验证码的函数code, yzm_img = yzm()# 验证码保存到rediscache.set('code', code, timeout=180)# 创建一个缓冲区buffer = io.BytesIO()# 将图片保存到缓冲区yzm_img.save(buffer, 'jpeg')# 获取缓冲区里的二进制图片b_img = buffer.getvalue()# 二进制图片交给响应，响应头要改为图片类型res = make_response(b_img)res.headers['Content-Type'] = 'image/jpg'

前端渲染

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><title>Title</title>
</head>
<body>
<h1>注册</h1>
<form method="post" action="{{ url_for('user.test_register') }}" enctype="multipart/form-data">{{ form.csrf_token }}用户名---{{ form.username.label }}{{ form.username }}{{ form.username.errors[0] }}<br>密码{{ form.password }}{{ form.password.errors[0] }} <br>再次输入{{ form.password2 }}{{ form.password2.errors.0 }}<br>{{ form.phone.label }}{{ form.phone }}{{ form.phone.errors.0 }}<br>头像{{ form.icon }}{{ form.icon.errors.0 }}<br>验证码{{ form.yzm }}{{ form.yzm.errors.0 }}<img src="{{ url_for('user.get_img') }}" alt="验证码" id="yzm_img"><br><input type="submit" value="注册">
</form>
<script>// 点击切换验证码$('#yzm_img').click(function(){// 后面添加一个随机数，不同的请求才能切换$(this).attr('src', "{{ url_for('user.get_img') }}?key=" + Math.random());// $(this).attr('src', "{{ url_for('user.get_img') }}");});
</script>
</body>
</html>