Flask WTForms 表单数据处理与结果动态展示教程
Flask是轻量级的Python Web框架，WTForms是其常用的表单处理扩展，二者结合可以高效完成表单的定义、数据验证和结果展示工作，适合各类中小型Web项目的表单功能开发。
环境准备与依赖安装
首先需要安装Flask和WTForms相关依赖，使用pip命令即可完成安装，具体执行以下命令：
pip install flask flask-wtf
WTForms表单类定义
我们先定义一个简单的用户注册表单，包含用户名、邮箱和密码三个字段，同时设置对应的验证规则。表单类需要继承FlaskForm，每个字段可以指定验证器来确保数据合法性。
from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField
from wtforms.validators import DataRequired, Length, Email
class RegisterForm(FlaskForm):
# 用户名字段，必填，长度2到20位
username = StringField(
label="用户名",
validators=[DataRequired(), Length(min=2, max=20)]
)
# 邮箱字段，必填，需符合邮箱格式
email = StringField(
label="邮箱",
validators=[DataRequired(), Email()]
)
# 密码字段，必填，长度6到20位
password = PasswordField(
label="密码",
validators=[DataRequired(), Length(min=6, max=20)]
)
# 提交按钮
submit = SubmitField(label="注册")
Flask路由配置与表单数据处理
接下来配置Flask路由，处理GET请求时渲染表单页面，处理POST请求时验证表单数据，验证通过后将处理结果传递到前端展示。需要在配置中设置密钥用于表单CSRF保护。
from flask import Flask, render_template, flash, redirect, url_for
from form import RegisterForm
app = Flask(__name__)
# 设置密钥，用于CSRF保护
app.config["SECRET_KEY"] = "your_secret_key_here"
@app.route("/register", methods=["GET", "POST"])
def register():
form = RegisterForm()
# 判断是否为POST请求且表单验证通过
if form.validate_on_submit():
# 获取表单数据
username = form.username.data
email = form.email.data
# 提示注册成功
flash(f"用户 {username} 注册成功，邮箱为 {email}", "success")
# 重定向到结果展示页面
return redirect(url_for("show_result", username=username, email=email))
# GET请求时渲染表单页面
return render_template("register.html", form=form)
@app.route("/result")
def show_result():
# 获取URL参数中的用户信息
username = request.args.get("username")
email = request.args.get("email")
return render_template("result.html", username=username, email=email)
if __name__ == "__main__":
app.run(debug=True)
前端模板动态展示
前端模板分为表单页面和结果展示页面，使用Jinja2模板语法可以动态渲染表单字段和处理结果。表单页面需要渲染表单字段和错误提示，结果页面展示处理后的表单数据。
register.html 表单页面
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
</head>
<body>
<h2>用户注册</h2>
<form method="POST">
<!-- CSRF令牌 -->
{{ form.hidden_tag() }}
<p>
{{ form.username.label }}<br>
{{ form.username() }}<br>
{% for error in form.username.errors %}
<span style="color: red;">{{ error }}</span>
{% endfor %}
</p>
<p>
{{ form.email.label }}<br>
{{ form.email() }}<br>
{% for error in form.email.errors %}
<span style="color: red;">{{ error }}</span>
{% endfor %}
</p>
<p>
{{ form.password.label }}<br>
{{ form.password() }}<br>
{% for error in form.password.errors %}
<span style="color: red;">{{ error }}</span>
{% endfor %}
</p>
<p>{{ form.submit() }}</p>
</form>
<!-- 展示flash消息 -->
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
<div style="color: green;">{{ message }}</div>
{% endfor %}
{% endif %}
{% endwith %}
</body>
</html>
result.html 结果展示页面
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>注册结果</title>
</head>
<body>
<h2>注册结果展示</h2>
<table border="1">
<tr>
<th>字段</th>
<th>内容</th>
</tr>
<tr>
<td>用户名</td>
<td>{{ username }}</td>
</tr>
<tr>
<td>邮箱</td>
<td>{{ email }}</td>
</tr>
</table>
<a href="{{ url_for("register") }}">返回注册页面</a>
</body>
</html>
常见问题与处理方案
- 表单提交后提示CSRF错误：需要检查是否配置了
SECRET_KEY，且表单中是否添加了{{ form.hidden_tag() }}。 - 表单验证不通过：可以通过
form.errors查看所有错误，检查验证器设置是否符合预期。 - 动态展示数据为空：检查路由中传递参数的名称和前端模板中使用的变量名称是否一致。
注意：实际开发中将密钥存储在环境变量中，不要直接写在代码里，避免安全风险。