Web后端学习笔记 Flask（8） WTForms 表单验证，文件上传

最新推荐文章于 2023-06-29 09:51:10 发布

Alpha205

最新推荐文章于 2023-06-29 09:51:10 发布

阅读量1.4k

点赞数 3

分类专栏：后端学习

本文链接：https://blog.csdn.net/zj1131190425/article/details/105509097

版权

后端学习专栏收录该内容

15 篇文章 2 订阅

订阅专栏

Flask-WTF是简化了WTForms操作的一个第三方库。WTForms表单的两个主要功能是验证用户提交数据的合法性以及渲染模板。同时还包含一些其他的功能。例如CSRF保护，文件上传等功能，安装flask-wtf也会默认安装WTForms，通过pip方式安装：

pip install flask-wtf

表单验证

1. 自定义一个表单类，继承自wtform.Form类。

2. 定义好需要验证的字段，字段的名字必须和模板中input标签的name字段名字相同

3. 在需要验证的字段上，需要指定好具体的数据类型

4. 在相关的字段上，指定好验证器

5. 在视图中就只需要表单类的对象，进行表单验证。

from wtforms import Form, StringField
from wtforms.validators import Length, EqualTo

# 表单验证类
class RegisterForm(Form):
    # 导入验证器
    # message为验证错误时抛出的错误信息
    username = StringField(validators=[Length(min=3, max=10,
                                              message="用户名长度必须3到10位")])
    password = StringField(validators=[Length(min=6, max=10,
                                              message="密码长度必须6到10位")])
    repeat_password = StringField(validators=[Length(min=6, max=10, message="密码错误"),
                                              EqualTo("password")])

视图函数的验证：

@app.route('/register/', methods=["GET", "POST"])
def register():
    """
    表单验证
    :return:
    """
    if request.method == "GET":
        return render_template("html/register.html")
    else:
        form = RegisterForm(request.form)
        if form.validate():
            return "success"
        else:
            print(form.errors)    # 获取具体的错误信息
            return "Fail"

WTForm常用的验证器：
Email：验证上传的数据是否为邮箱

EqualTo：验证上传的数据是否和另一个字段相等

InputRequired：原始数据的需要验证，如果不是特殊情况，应该使用InputRequired，即指定这个字段必须是要传的，否则会报错

Length：长度限制

NumberRange：数字的区间

Regexp：自定义正则表达式

URL：必须要是url的形式

UUID：验证uuid

# -*- coding: utf-8 -*-
from wtforms import Form, StringField, IntegerField
from wtforms.validators import Length, EqualTo, InputRequired, Email, NumberRange, URL, UUID, Regexp


# 表单验证类
class RegisterForm(Form):
    # 导入验证器
    # message为验证错误时抛出的错误信息
    username = StringField(validators=[Length(min=3, max=10,
                                              message="用户名长度必须3到10位")])
    password = StringField(validators=[Length(min=6, max=10,
                                              message="密码长度必须6到10位")])
    repeat_password = StringField(validators=[Length(min=6, max=10, message="密码错误"),
                                              EqualTo("password")])


# 表单验证类
class LoginForm(Form):
    # email = StringField(validators=[Email(message="邮箱格式错误")])
    username = StringField(validators=[InputRequired(message="用户名不能为空")])
    age = IntegerField(validators=[NumberRange(20, 55)])
    phone = StringField(validators=[Regexp(r"1[38745]\d{9}")])

自定义验证器：

当WTForm中的验证器不能满足业务需求的时候，用户可以自定义自己的验证器：

例如自定义验证码的验证器：

1. 定义一个方法，方法的命名规则是 validate_字段名(self，field)

2. 在方法中使用field.data可以获取到字段的具体值

3. 如果验证成功，那么可以什么都不做

4. 如果验证失败，需要抛出一个异常

# 表单验证类
class LoginForm(Form):
    # email = StringField(validators=[Email(message="邮箱格式错误")])
    # username = StringField(validators=[InputRequired(message="用户名不能为空")])
    # age = IntegerField(validators=[NumberRange(20, 55)])
    # phone = StringField(validators=[Regexp(r"1[38745]\d{9}")])
    captcha = StringField(validators=[Length(4, 4)])  # 首先验证长度

    # 假设验证码为1234, 自定义captcha验证器，函数名必须以validate开头
    # 所以在验证captcha的时候，除了验证Length,还会自动调用下面自定义的函数进行验证
    def validate_captcha(self, field):   # 针对具体的字段做验证
        # 通过field.data获取数据
        if field.data == "1234":
            return "Success"
        else:
            raise ValidationError("验证码错误")

WTForm渲染模板(不推荐使用)

WTForm可以结合jinja2模板渲染表单元素，例如可以渲染各种input, radio等标签

1. 首先，在form.py文件中定义相关的表单类，定义相关的字段

class SettingForm(Form):
    username = StringField("用户名", validators=[InputRequired()])
    age = IntegerField("年龄", validators=[NumberRange(20, 60)])
    remember = BooleanField("记住我: ")
    tags = SelectField("标签", choices=[("1", "Java"), ("2", "C++"), ("3", "Android")]

2. 在视图函数中，将实例化的form对象作为参数，传递到模板文件中：

@app.route('/settings/', methods=["GET", "POST"])
def setting():
    if request.method == "GET":
        form = SettingForm()     # 利用form渲染模板
        return render_template("html/settings.html", form=form)   # 传递参数
    else:
        form = SettingForm(request.form)
        pass

3. 在模板文件中，可以通过变量绑定来使用，同时，可以对相应的字段传入样式参数，id, class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置</title>
    <style>
        .username-input
        {
            background: blue;
        }
        #age-input
        {
            background: pink;
        }
    </style>
</head>
<body>
    <form action="" method="post">
        <table>
            <tbody>
                <tr>
                    <!--利用form渲染页面-->
                    <td>{{ form.username.label }}</td>
{#                    <td>用户名</td>#}
{#                    <td><input type="text" name="username"></td>#}
                    <td>{{ form.username(class="username-input") }}</td>
                </tr>
                <tr>
                    <!--传入参数-->
                    <td>{{ form.age.label }}</td>
                    <td>{{ form.age(id="age-input") }}</td>
                </tr>
                <tr>
                    <td>{{ form.remember.label }}</td>
                    <td>{{ form.remember() }}</td>
                </tr>
                <tr>
                    <td>{{ form.tags.label }}</td>
                    <td>{{ form.tags() }}</td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="submit" value="提交"></td>
                </tr>
            </tbody>
        </table>
    </form>
</body>
</html>

渲染的效果：

文件上传

1. 在模板中，需要指定input标签的enctype才能上传文件。upload.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上传</title>
</head>
<body>
    <form action="" method="post" enctype="multipart/form-data">   <!--上传文件要写enctype-->
        <table>
            <tbody>
                <tr>
                    <td>头像: </td>
                    <td><input type="file" name="avatar"></td>
                </tr>
                <tr>
                    <td>描述: </td>
                    <td><input type="text" name="desc"></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="submit" value="提交"></td>
                </tr>
            </tbody>
        </table>
    </form>
</body>
</html>

完成上传界面：

2. 在后台如果想要获取上传的文件，那么应该使用request.files.get(name)获取上传的文件，这里的name值表示的是对应的input标签的name属性的值。

@app.route('/upload/', methods=["GET", "POST"])
def upload():
    if request.method == "GET":
        return render_template("html/upload.html")
    else:
        # 接受用户上传的数据
        desc = request.form.get("desc")
        avatar = request.files.get("avatar")        # 获取文件
        # 保存文件
        file_name = secure_filename(avatar.filename)  # 对文件名进行安全检测
        avatar.save("uploaded/" + file_name)
        print(desc)
        return "文件上传成功"

3. 获取到上传的文件后，可以使用save方法保存文件

【注】：在保存文件之前，需要使用secure_filename对文件名进行过滤，消除安全隐患：

from werkzeug.utils import secure_filename    # 对文件名进行包装

4. 在服务器上读取文件，应该定义一个url来获取指定文件，在视图函数中使用send_from_directory(文件目录，文件名)来获取服务器上的文件：

@app.route('/show/<file_name>/')
def show_image(file_name):
    return send_from_directory("uploaded/", filename=file_name)

完整的app.py文件如下：

from flask import Flask, url_for, request, render_template
import config
from exts import db
from forms import RegisterForm, LoginForm, SettingForm
import os
from werkzeug.utils import secure_filename    # 对文件名进行包装
from flask import send_from_directory

app = Flask(__name__)
app.config.from_object(config)
db.init_app(app)    # db获取app中数据库的连接方式


@app.route('/')
def hello_world():
    return 'Hello World!'


@app.route('/profile/')
def profile():
    return "profile page"


@app.route('/register/', methods=["GET", "POST"])
def register():
    """
    表单验证
    :return:
    """
    if request.method == "GET":
        return render_template("html/register.html")
    else:
        form = RegisterForm(request.form)
        if form.validate():
            return "success"
        else:
            print(form.errors)    # 获取具体的错误信息
            return "Fail"


@app.route('/login/', methods=["GET", "POST"])
def login():
    if request.method == "GET":
        return render_template("html/login.html")
    else:
        form = LoginForm(request.form)
        if form.validate():
            return "success"
        else:
            print(form.errors)
            return "Failed"


@app.route('/settings/', methods=["GET", "POST"])
def setting():
    if request.method == "GET":
        form = SettingForm()     # 利用form渲染模板
        return render_template("html/settings.html", form=form)
    else:
        form = SettingForm(request.form)
        pass


@app.route('/upload/', methods=["GET", "POST"])
def upload():
    if request.method == "GET":
        return render_template("html/upload.html")
    else:
        # 接受用户上传的数据
        desc = request.form.get("desc")
        avatar = request.files.get("avatar")        # 获取文件
        # 保存文件
        file_name = secure_filename(avatar.filename)  # 对文件名进行安全检测
        avatar.save("uploaded/" + file_name)
        print(desc)
        return "文件上传成功"


@app.route('/show/<file_name>/')
def show_image(file_name):
    return send_from_directory("uploaded/", filename=file_name)


if __name__ == '__main__':
    app.run()

利用Flask_wtf验证上传的文件：

1. 对上传的问价使用表单验证，在定义表单的时候，对文件的字段需要采用FileField进行验证

2. 验证器应该从flask_wtf.file中导入，需要使用的是flask_wtf.file.FileRequired验证文件是否为空，flask_wtf.file.FileAllowed

验证文件的格式是否满足要求。

3. 在进行验证的时候，因为上传的字符串需要使用request.form进行获取，上传的文件需要使用request.file进行获取，所以在进行验证的时候，需要对这两个数据进行组合，这两个数据都是immutableDict，不可变字典的形式，所以在视图函数中使用CombineMultiDict将字符串和文件组合在一起，作为表单验证的输入参数。

示例代码：

form.py中定义的验证表单

from flask_wtf.file import FileRequired, FileAllowed    # 验证文件必须上传，以及上传的类型
# 定义上传表单验证
class UploadForm(Form):
    avatar = FileField(validators=[FileRequired(), FileAllowed(["jpg", "png", "gif"])])
    desc = StringField(validators=[InputRequired()])

视图函数：

from werkzeug.datastructures import CombinedMultiDict   # 将两个不可变的字典组合到一起

@app.route('/upload/', methods=["GET", "POST"])
def upload():
    if request.method == "GET":
        return render_template("html/upload.html")
    else:
        # 接受用户上传的数据
        # form = UploadForm(request.form)   # 因为这里字符串是根据request.form获取的 文件时根据request.form获取的，需要组合
        form = UploadForm(CombinedMultiDict([request.form, request.files]))
        if form.validate():
            desc = request.form.get("desc")
            avatar = request.files.get("avatar")  # 获取文件
            
            # 另一种数据获取方法
            # desc_ = form.desc.data
            # avatar_ = form.avatar.data
            
            # 保存文件
            file_name = secure_filename(avatar.filename)  # 对文件名进行安全检测
            avatar.save("uploaded/" + file_name)
            print(desc)
            return "文件上传成功"
        else:
            print(form.errors)
            return "文件上传失败"

Alpha205

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Web后端学习笔记 Flask（8） WTForms 表单验证，文件上传

Flask-WTF是简化了WTForms操作的一个第三方库。WTForms表单的两个主要功能是验证用户提交数据的合法性以及渲染模板。同时还包含一些其他的功能。例如CSRF保护，文件上传等功能，安装flask-wtf也会默认安装WTForms，通过pip方式安装：pip install flask-wtf表单验证1. 自定义一个表单类，继承自wtform.Form类。2. 定义好需要...
复制链接

扫一扫