Flask WTForms：同一页面上的两个表单

在本文中，我们将介绍如何在Flask中使用WTForms库来创建同一页面上的两个表单。WTForms是一个流行的表单处理库，它简化了表单验证和渲染的过程，可以帮助我们更轻松地构建Web应用程序。

阅读更多：Flask 教程

什么是WTForms？

WTForms是一个用于处理Web表单的Python库。它提供了一个简单而强大的方式来定义和验证表单数据。在Flask应用程序中使用WTForms，可以帮助我们有效地处理用户输入数据，验证表单的有效性，并在需要时显示错误消息。

安装和导入WTForms

首先，我们需要安装WTForms库。可以使用以下命令通过pip安装WTForms：

pip install wtforms

安装完成后，我们可以将WTForms导入到Flask应用程序中：

from flask_wtf import FlaskForm
from wtforms import StringField, SubmitField
from wtforms.validators import DataRequired

创建表单类

WTForms通过表单类来定义和验证表单字段。每个表单字段都是一个类变量，并且可以在实例化表单时通过参数进行配置。

在我们的例子中，我们将创建两个表单类，分别用来处理用户的登录和注册。每个表单都有一个用户名字段和一个提交按钮。

class LoginForm(FlaskForm):
    username = StringField('用户名', validators=[DataRequired()])
    submit = SubmitField('登录')

class RegistrationForm(FlaskForm):
    username = StringField('用户名', validators=[DataRequired()])
    submit = SubmitField('注册')

在上面的代码中，我们使用StringField类创建了一个文本输入字段，以及SubmitField类创建了一个提交按钮。我们还使用validators参数来添加一个验证器，确保用户输入的用户名不为空。

创建Flask视图函数

接下来，我们需要在Flask应用程序中创建视图函数来处理表单的提交和渲染。

from flask import Flask, render_template, request, redirect
app = Flask(__name__)
app.secret_key = 'secret'

@app.route('/', methods=['GET', 'POST'])
def index():
    login_form = LoginForm()
    registration_form = RegistrationForm()

    if request.method == 'POST':
        if login_form.validate_on_submit():
            # 处理登录表单的逻辑
            username = login_form.username.data
            return redirect('/welcome?username=' + username)

        if registration_form.validate_on_submit():
            # 处理注册表单的逻辑
            username = registration_form.username.data
            return redirect('/welcome?username=' + username)

    return render_template('index.html', login_form=login_form, registration_form=registration_form)

@app.route('/welcome')
def welcome():
    username = request.args.get('username')
    return '欢迎您，' + username + '！'

在上面的代码中，我们创建了一个Flask应用程序，并定义了一个根路由/。在根路由中，我们实例化了登录表单和注册表单，并通过render_template函数将它们传递给HTML模板。如果HTTP请求的方法为POST，我们将分别检查login_form和registration_form表单的验证结果，并根据验证结果执行相应的逻辑。

此外，我们还为Flask应用程序定义了一个/welcome路由，用来显示欢迎信息。

创建HTML模板

接下来，我们需要创建一个HTML模板来渲染表单并显示错误消息。

<!DOCTYPE html>
<html>
<head>
    <title>Flask WTForms</title>
</head>
<body>
    <h1>登录</h1>
    <form method="POST">
        {{ login_form.csrf_token }}
        {{ login_form.username.label }} {{ login_form.username }}<br>
        {% if login_form.username.errors %}
            <ul>
            {% for error in login_form.username.errors %}
                <li>{{ error }}</li>
            {% endfor %}
            </ul>
        {% endif %}
        {{ login_form.submit }}
    </form>

    <h1>注册</h1>
    <form method="POST">
        {{ registration_form.csrf_token }}
        {{ registration_form.username.label }} {{ registration_form.username }}<br>
        {% if registration_form.username.errors %}
            <ul>
            {% for error in registration_form.username.errors %}
                <li>{{ error }}</li>
            {% endfor %}
            </ul>
        {% endif %}
        {{ registration_form.submit }}
    </form>
</body>
</html>

在上面的代码中，我们使用WTForms的模板渲染语法来渲染表单字段和错误消息。我们将表单的CSRF令牌添加到每个表单中，以确保表单的安全性。

此外，我们还使用了条件语句来检查表单字段中是否存在错误消息，并将错误消息以列表的形式显示在页面上。