6.1 原生表单处理

Flask原生表单处理教程：表单创建、验证与回显

Flask 中文教程

本教程详细讲解如何在Flask中进行原生表单处理，包括表单创建、提交逻辑、后端手动验证、错误信息展示和表单回显。适合Flask新手学习，通过代码示例帮助您掌握基础表单处理技能。

Flask 原生表单处理教程

引言

在 Web 开发中，表单是用户与应用程序交互的重要组件，用于收集数据如注册信息、搜索查询等。Flask 是一个轻量级的 Python Web 框架，它提供了简单但强大的工具来处理表单，无需依赖第三方扩展。本教程将从头开始，教你如何使用 Flask 的原生功能处理表单，确保内容详细且易于新手理解。

通过本教程，您将学到：

如何创建 HTML 表单并与 Flask 集成。
处理表单提交的逻辑（GET 和 POST 方法）。
在后端手动验证表单数据以确保安全性和准确性。
显示验证错误信息，并实现表单回显，提升用户体验。

原生表单处理

在 Flask 中，表单数据通过 HTTP 请求传递。Flask 内置的 request 对象可以轻松访问这些数据。原生表单处理指使用 Flask 的核心功能，而不是扩展如 Flask-WTF，这有助于理解底层原理。

获取表单数据

对于 POST 请求，使用 request.form 字典获取表单字段。
对于 GET 请求，使用 request.args 字典获取 URL 查询参数。

Flask 的 request 对象需要在路由函数中导入，示例：

from flask import Flask, request
app = Flask(__name__)

@app.route('/')
def home():
    data = request.args.get('search')  # GET 示例
    return f"搜索词: {data}"

表单创建与提交逻辑

创建 HTML 表单

表单通常使用 HTML 创建，并在 Flask 中通过模板渲染。Flask 默认使用 Jinja2 模板引擎。创建一个简单的表单 HTML 文件（如 form.html）。

<!DOCTYPE html>
<html>
<head>
    <title>Flask 表单示例</title>
</head>
<body>
    <h1>用户注册</h1>
    <form method="POST" action="/submit">
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username" required>
        <br>
        <label for="email">邮箱:</label>
        <input type="email" id="email" name="email" required>
        <br>
        <button type="submit">提交</button>
    </form>
</body>
</html>

method="POST" 表示表单通过 POST 方法提交数据，更安全。
action="/submit" 指定提交到的 Flask 路由。

处理表单提交

在 Flask 应用中，您需要定义路由来处理表单提交。使用 methods 参数指定路由接受 GET 和 POST 请求。

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/', methods=['GET'])
def index():
    # 显示表单页面
    return render_template('form.html')

@app.route('/submit', methods=['POST'])
def submit():
    if request.method == 'POST':
        username = request.form.get('username')
        email = request.form.get('email')
        return f"提交成功！用户名: {username}, 邮箱: {email}"
    else:
        return "无效请求"

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

request.method 检查当前请求方法。
request.form.get('field_name') 安全获取表单字段值，如果字段不存在则返回 None。

表单数据验证（后端手动验证）

为什么需要验证

验证确保用户输入的数据符合预期格式和规则，防止错误、安全漏洞（如 SQL 注入）或无效数据进入系统。

手动验证示例

在 Flask 后端，您可以添加自定义验证逻辑。例如，验证用户名长度和邮箱格式。

@app.route('/submit', methods=['POST'])
def submit():
    if request.method == 'POST':
        username = request.form.get('username', '').strip()  # 去除空格
        email = request.form.get('email', '').strip()
        
        errors = []  # 存储错误信息列表
        
        # 验证用户名：非空且长度至少 3 字符
        if not username:
            errors.append("用户名不能为空。")
        elif len(username) < 3:
            errors.append("用户名必须至少 3 个字符。")
        
        # 验证邮箱：非空且包含 '@' 符号
        if not email:
            errors.append("邮箱不能为空。")
        elif '@' not in email:
            errors.append("请输入有效的邮箱地址。")
        
        if errors:
            # 如果有错误，返回错误信息
            # 后续部分将展示如何回显表单
            return "错误: " + ", ".join(errors)
        else:
            # 数据有效，可以保存到数据库或进一步处理
            return f"提交成功！用户名: {username}, 邮箱: {email}"

使用列表 errors 收集错误，便于处理多个验证失败。
strip() 方法去除输入字符串两端的空格，避免无效数据。

错误信息展示与表单回显

错误信息展示

当验证失败时，应向用户显示错误消息，帮助他们纠正输入。您可以将错误信息传递回模板并在页面上显示。

表单回显

表单回显是指在表单中保留用户之前输入的数据，即使验证失败，用户也不必重新填写所有字段。这通过将数据传递回模板实现。

完整集成示例

修改路由和模板，以支持错误展示和表单回显。将表单提交和显示合并到同一路由，简化处理。

更新 Flask 代码:

@app.route('/', methods=['GET', 'POST'])
def index():
    errors = []
    username = ''
    email = ''
    
    if request.method == 'POST':
        username = request.form.get('username', '').strip()
        email = request.form.get('email', '').strip()
        
        # 验证逻辑
        if not username:
            errors.append("用户名不能为空。")
        elif len(username) < 3:
            errors.append("用户名必须至少 3 个字符。")
        
        if not email:
            errors.append("邮箱不能为空。")
        elif '@' not in email:
            errors.append("请输入有效的邮箱地址。")
        
        if not errors:
            # 验证成功，处理数据
            return f"提交成功！用户名: {username}, 邮箱: {email}"
        # 如果 errors 不为空，继续渲染表单以显示错误和回显数据
    
    # 渲染表单，传递 errors、username 和 email 数据
    return render_template('form.html', errors=errors, username=username, email=email)

更新 HTML 模板 (form.html):

<!DOCTYPE html>
<html>
<head>
    <title>Flask 表单示例</title>
</head>
<body>
    <h1>用户注册</h1>
    
    <!-- 错误信息展示 -->
    {% if errors %}
        <div style="color: red; margin-bottom: 15px;">
            <strong>请更正以下错误：</strong>
            <ul>
                {% for error in errors %}
                    <li>{{ error }}</li>
                {% endfor %}
            </ul>
        </div>
    {% endif %}
    
    <!-- 表单，使用回显数据 -->
    <form method="POST" action="{{ url_for('index') }}">
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username" value="{{ username }}" required>
        <br>
        <label for="email">邮箱:</label>
        <input type="email" id="email" name="email" value="{{ email }}" required>
        <br>
        <button type="submit">提交</button>
    </form>
</body>
</html>

在模板中，使用 {% if errors %} 判断是否有错误，然后遍历显示。
value="{{ username }}" 和 value="{{ email }}" 确保在表单回显时显示之前输入的值。
url_for('index') 生成当前路由的 URL，使表单提交到同一页面。

最佳实践提示

对于更复杂的验证，可以考虑使用正则表达式或自定义函数。
在真实项目中，建议使用 Flask-WTF 扩展来简化表单创建和验证，但掌握原生方式有助于理解底层机制。
始终对用户输入进行清理，防止跨站脚本（XSS）等攻击，例如在模板中使用 {{ data|safe }} 或转义输出。

总结

通过本教程，您已经学会了如何使用 Flask 进行原生表单处理。关键点包括：

使用 HTML 和模板创建表单。
通过 Flask 路由处理表单提交，区分 GET 和 POST 方法。
在后端手动验证数据，确保输入符合规则。
展示验证错误并实现表单回显，提升用户体验。

原生表单处理虽然基础，但它是构建 Flask 应用的核心技能。建议您动手实践代码示例，并根据需求调整验证逻辑。随着技能提升，您可以探索 Flask 扩展如 Flask-WTF 来更高效地处理表单。

上一章 5.4 静态文件管理

下一章 6.2 Flask-WTF 扩展使用

Flask 中文教程

6.1 原生表单处理

Flask 原生表单处理教程

引言

原生表单处理

获取表单数据

表单创建与提交逻辑

创建 HTML 表单

处理表单提交

表单数据验证（后端手动验证）

为什么需要验证

手动验证示例

错误信息展示与表单回显

错误信息展示

表单回显

完整集成示例

最佳实践提示

总结

相关文档

Python 教程

FastAPI 教程

Django 6中文教程

NumPy 中文教程

Scikit-learn 中文教程

TensorFlow 中文手册