Flask-WTF 处理表单和验证输入数据

myzbx 2024-12-24 14:30 23 浏览

Flask-WTF 是基于 WTForms 的 Flask 扩展，用于处理 Web 表单及其验证。它简化了表单创建、数据验证、错误处理等任务。Flask-WTF 提供了对表单字段、表单验证和 CSRF 保护的支持，特别适合用来处理复杂的表单输入。

1. 安装 Flask-WTF

在开始之前，需要安装 Flask-WTF：

pip install Flask-WTF

2. 基本使用

Flask-WTF 结合了 WTForms 的表单定义和 Flask 的请求上下文来处理用户输入。

目录结构

my_flask_app/
│
├── app.py                 # Flask 应用文件
└── templates/             # 存放模板文件的目录
    └── form.html          # HTML 模板文件

代码示例

定义表单类

Flask-WTF 使用 Python 类来定义表单，并且通过字段和验证器来处理表单的输入。

from flask import Flask, render_template, flash, redirect, url_for
from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField
from wtforms.validators import DataRequired, Length

app = Flask(__name__)
app.config['SECRET_KEY'] = 'your_secret_key'  # 用于CSRF保护

# 定义表单类
class LoginForm(FlaskForm):
    username = StringField('Username', validators=[DataRequired(), Length(min=4, max=25)])
    password = PasswordField('Password', validators=[DataRequired()])
    submit = SubmitField('Login')

@app.route('/', methods=['GET', 'POST'])
def login():
    form = LoginForm()  # 创建表单实例
    if form.validate_on_submit():  # 检查是否为有效提交
        username = form.username.data
        flash(f'Login requested for {username}', 'success')
        return redirect(url_for('login'))  # 重定向避免重复提交
    return render_template('form.html', form=form)

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

HTML 模板 form.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
</head>
<body>
    <h1>Login Form</h1>
    <form method="POST">
        {{ form.hidden_tag() }}  <!-- 用于 CSRF 保护 -->
        <p>
            {{ form.username.label }}<br>
            {{ form.username(size=32) }}<br>
            {% for error in form.username.errors %}
                <span style="color: red;">[{{ error }}]</span>
            {% endfor %}
        </p>
        <p>
            {{ form.password.label }}<br>
            {{ form.password(size=32) }}<br>
            {% for error in form.password.errors %}
                <span style="color: red;">[{{ error }}]</span>
            {% endfor %}
        </p>
        <p>{{ form.submit() }}</p>
    </form>

    <!-- 显示闪存消息 -->
    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            <ul>
                {% for category, message in messages %}
                    <li><strong>{{ category }}</strong>: {{ message }}</li>
                {% endfor %}
            </ul>
        {% endif %}
    {% endwith %}
</body>
</html>

解释：

FlaskForm：LoginForm 继承自 FlaskForm，这是 Flask-WTF 的基础表单类。
字段：StringField 和 PasswordField 定义了表单的输入字段；SubmitField 定义了提交按钮。
验证器：通过 validators 参数，字段添加了验证规则，如 DataRequired() 表示该字段必填，Length(min, max) 限制输入的字符长度。
validate_on_submit()：该方法在 POST 请求并且表单提交有效时返回 True。
CSRF 保护：表单默认启用 CSRF 保护，通过 SECRET_KEY 和 hidden_tag() 来实现。
flash()：用于在表单提交后显示消息，例如 "Login requested for {username}"。

3. 常见验证器

Flask-WTF 提供了多种常见的验证器，使用这些验证器可以保证用户输入的合法性。

DataRequired()：确保字段非空。
Length(min, max)：限制输入的字符长度。
Email()：验证输入是否为有效的电子邮件地址。
EqualTo(fieldname)：确保两个字段的值相等（如密码和确认密码）。
Regexp(regex)：使用正则表达式验证输入。

from wtforms.validators import Email, EqualTo

class RegistrationForm(FlaskForm):
    email = StringField('Email', validators=[DataRequired(), Email()])
    password = PasswordField('Password', validators=[DataRequired()])
    confirm_password = PasswordField('Confirm Password', validators=[DataRequired(), EqualTo('password')])
    submit = SubmitField('Register')

4. 自定义验证器

你还可以自定义验证器来满足特定需求。自定义验证器是一个接受 form 和 field 参数的函数，如果验证失败，可以抛出 ValidationError。

from wtforms.validators import ValidationError

def username_not_taken(form, field):
    if field.data == 'admin':  # 模拟用户已存在的情况
        raise ValidationError('Username is already taken.')

class RegisterForm(FlaskForm):
    username = StringField('Username', validators=[DataRequired(), username_not_taken])
    password = PasswordField('Password', validators=[DataRequired()])
    submit = SubmitField('Register')

5. 表单的 CSRF 保护

Flask-WTF 内置 CSRF 保护，要求每个表单提交都带有一个令牌，防止跨站请求伪造攻击。默认情况下，Flask-WTF 自动生成和验证 CSRF 令牌。你只需要在 HTML 表单中添加 form.hidden_tag() 来插入隐藏的 CSRF 令牌。

<form method="POST">
    {{ form.hidden_tag() }}  <!-- CSRF 令牌 -->
    <!-- 表单字段 -->
</form>

6. 处理表单的错误

当表单验证失败时，错误会存储在表单字段的 errors 属性中。可以在模板中遍历这些错误并显示给用户。

{% for error in form.username.errors %}
    <span style="color: red;">[{{ error }}]</span>
{% endfor %}

7. 运行应用程序

在终端中运行 Flask 应用程序：

python app.py

访问 http://127.0.0.1:5000/，你会看到一个简单的登录表单，输入不符合验证条件时会显示错误消息。

总结

Flask-WTF 简化了表单的创建和处理，提供了验证输入数据、管理 CSRF 保护以及在模板中渲染表单的便捷方式。通过定义表单类并将其传递给模板，你可以轻松地实现复杂的表单处理逻辑，确保用户输入的正确性和安全性。

HTML Input 表单属性

上一篇：如何用VBA制作一个简易输入表单? 如何用vba制作一个简易输入表单格式
下一篇：HTML DOM Input DatetimeLocal 对

Flask-WTF 处理表单和验证输入数据

1. 安装 Flask-WTF

2. 基本使用

目录结构

代码示例

解释：

3. 常见验证器

4. 自定义验证器

5. 表单的 CSRF 保护

6. 处理表单的错误

7. 运行应用程序

总结

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

说下你的vue项目的目录结构，该怎么划分?

这么牛逼的cursor功能，赶紧用起来

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

8.7k star，一款超炫酷的动态可视化大屏项目

用上Vue3，你真的变了吗?（vue3 key）

20个免费音乐音效下载网站，无版权素材商业影片也可用

comfyui安装MimicMotion扩展，AI跳舞动作模仿

什么是“恒定光圈”，什么是“浮动光圈”?-摄影早自习第331