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

在本文中，我们将介绍如何在Flask中使用WTForms来实现在同一页面上展示两个表单的功能。WTForms是一个方便的Python表单库，可以简化表单的处理和验证。

阅读更多：Flask 教程

什么是Flask WTForms？

Flask是一个使用Python编写的轻量级Web应用框架，而WTForms是Flask中常用的表单处理库。它提供了一个简单而灵活的方式来定义表单，并且支持表单的验证、渲染和提交。

使用Flask WTForms，我们可以很方便地创建多个表单，并将它们在同一页面上展示。接下来，我们将通过一个示例来详细介绍这个过程。

示例：登录和注册表单

假设我们有一个Web应用，需要在同一页面上展示用户登录和注册的表单。我们可以使用Flask WTForms来实现这个功能。

首先，我们需要创建两个表单类，分别是登录表单和注册表单。我们可以使用WTForms提供的字段类型来定义各个字段，例如字符串字段、密码字段等等。具体的代码如下所示：

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

class LoginForm(FlaskForm):
    username = StringField('用户名', validators=[DataRequired(message='用户名不能为空'), Length(6, 20)])
    password = PasswordField('密码', validators=[DataRequired(message='密码不能为空'), Length(6, 20)])
    submit = SubmitField('登录')

class RegisterForm(FlaskForm):
    username = StringField('用户名', validators=[DataRequired(message='用户名不能为空'), Length(6, 20)])
    password = PasswordField('密码', validators=[DataRequired(message='密码不能为空'), Length(6, 20)])
    confirm_password = PasswordField('确认密码', validators=[DataRequired(message='确认密码不能为空'), Length(6, 20)])
    submit = SubmitField('注册')

在上面的代码中，我们定义了LoginForm和RegisterForm两个表单类，分别对应登录表单和注册表单。每个字段都有一个对应的label和验证器，用于验证用户输入的数据。我们还为每个表单类定义了一个提交按钮。

接下来，在Flask的路由函数中，我们可以实例化这两个表单类，并将它们传递给模板进行渲染。具体的代码如下所示：

from flask import Flask, render_template, request
from forms import LoginForm, RegisterForm

app = Flask(__name__)
app.secret_key = 'your_secret_key'

@app.route('/', methods=['GET', 'POST'])
def home():
    login_form = LoginForm()
    register_form = RegisterForm()

    if request.method == 'POST':
        if login_form.submit.data and login_form.validate():
            # 处理登录逻辑
            return '登录成功'
        elif register_form.submit.data and register_form.validate():
            # 处理注册逻辑
            return '注册成功'

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

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

在上面的代码中，我们首先实例化了LoginForm和RegisterForm两个表单类。然后，我们在路由函数中判断请求的方法是GET还是POST。如果是POST请求，我们通过validate()函数验证表单数据是否合法。如果合法，我们可以进一步处理登录或注册逻辑。如果是GET请求，我们将两个表单实例传递给模板进行渲染。

在模板文件index.html中，我们可以使用Flask WTForms提供的模板渲染函数来渲染表单。具体的代码如下所示：

<!DOCTYPE html>
<html>
  <head>
    <title>登录和注册</title>
  </head>
  <body>
    <h1>登录</h1>
    <form method="POST" action="/">
      {{ login_form.csrf_token }}
      {{ login_form.username.label }} {{ login_form.username }}
      {{ login_form.password.label }} {{ login_form.password }}
      {{ login_form.submit }}
    </form>
    <h1>注册</h1>
    <form method="POST" action="/">
      {{ register_form.csrf_token }}
      {{ register_form.username.label }} {{ register_form.username }}
      {{ register_form.password.label }} {{ register_form.password }}
      {{ register_form.confirm_password.label }} {{ register_form.confirm_password }}
      {{ register_form.submit }}
    </form>
  </body>
</html>

在上面的代码中，我们使用了csrf_token来防止跨站点请求伪造。通过{{ login_form.username.label }}和{{ login_form.username }}，我们可以分别渲染登录表单中的用户名字段的label和input。

通过以上的代码，我们实现了在同一页面上展示登录和注册表单的功能。用户可以在页面上输入登录或注册信息，并点击相应的提交按钮进行登录或注册操作。