Flask表單處理：從用戶輸入到數據展示的完整流程

在Web開發中，表單是收集用戶信息的重要工具。無論是登錄註冊、提交反饋還是收集數據，表單都是不可或缺的組件。Flask作爲輕量級Web框架，結合Flask-WTF擴展可以輕鬆實現表單的創建、驗證和數據處理。本文將通過一個完整的示例，帶您一步步掌握Flask表單處理的核心流程。

一、準備工作：安裝必要工具¶

首先確保已安裝Flask和Flask-WTF。如果尚未安裝，可以通過pip安裝：

pip install flask flask-wtf

二、第一步：創建表單類¶

表單的核心是定義需要收集的字段和驗證規則。通過繼承FlaskForm類，我們可以使用Flask-WTF提供的字段類型（如StringField、PasswordField）和內置驗證器（如DataRequired、Email）。

示例：創建用戶登錄表單

# forms.py 文件
from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField
from wtforms.validators import DataRequired, Length, Email, ValidationError

class LoginForm(FlaskForm):
    # 用戶名：必填，長度4-20字符
    username = StringField('用戶名', validators=[
        DataRequired(message='用戶名不能爲空'),
        Length(min=4, max=20, message='用戶名長度需在4-20之間')
    ])

    # 郵箱：必填，格式驗證
    email = StringField('郵箱', validators=[
        DataRequired(message='郵箱不能爲空'),
        Email(message='請輸入有效的郵箱地址')
    ])

    # 密碼：必填，長度至少8字符
    password = PasswordField('密碼', validators=[
        DataRequired(message='密碼不能爲空'),
        Length(min=8, message='密碼長度不能少於8位')
    ])

    # 提交按鈕
    submit = SubmitField('登錄')

三、第二步：編寫Flask應用與視圖函數¶

在Flask應用中，我們需要處理兩種請求：
- GET請求：渲染表單供用戶填寫
- POST請求：接收表單數據，驗證並處理

示例：主應用代碼

# app.py 文件
from flask import Flask, render_template, redirect, url_for, flash
from forms import LoginForm  # 導入表單類

app = Flask(__name__)
app.config['SECRET_KEY'] = 'your-secret-key-here'  # 用於CSRF保護（生產環境需使用隨機字符串）

@app.route('/login', methods=['GET', 'POST'])
def login():
    form = LoginForm()  # 實例化表單類

    if form.validate_on_submit():  # 檢查是否是POST請求且數據驗證通過
        # 獲取表單數據
        username = form.username.data
        email = form.email.data
        password = form.password.data  # 實際開發中需加密存儲，此處僅作演示

        # 模擬數據處理（例如：驗證用戶信息，登錄成功後重定向）
        flash(f'登錄成功！歡迎回來，{username}')  # 顯示成功提示
        return redirect(url_for('dashboard'))  # 重定向到儀表盤頁面

    return render_template('login.html', form=form)  # 渲染表單頁面

@app.route('/dashboard')
def dashboard():
    return render_template('dashboard.html')  # 數據展示頁面

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

四、第三步：設計HTML模板（表單渲染與數據展示）¶

模板負責將表單渲染到前端，並展示處理結果。我們需要在模板中使用form對象的方法渲染表單字段，並通過form.hidden_tag()添加CSRF令牌（Flask-WTF內置保護機制）。

1. 登錄表單模板（login.html）¶

<!-- templates/login.html -->
<!DOCTYPE html>
<html>
<head>
    <title>用戶登錄</title>
    <style>
        .error { color: red; }
        .form-group { margin-bottom: 15px; }
    </style>
</head>
<body>
    <h1>用戶登錄</h1>
    <!-- 顯示提示信息 -->
    {% with messages = get_flashed_messages() %}
        {% if messages %}
            {% for msg in messages %}
                <div style="color: green;">{{ msg }}</div>
            {% endfor %}
        {% endif %}
    {% endwith %}

    <!-- 渲染表單 -->
    <form method="POST">
        {{ form.hidden_tag() }}  <!-- 必須添加，用於CSRF保護 -->

        <!-- 用戶名 -->
        <div class="form-group">
            {{ form.username.label }}<br>
            {{ form.username(size=32, class="form-control") }}  <!-- 渲染輸入框 -->
            {% for error in form.username.errors %}  <!-- 顯示驗證錯誤 -->
                <span class="error">{{ error }}</span>
            {% endfor %}
        </div>

        <!-- 郵箱 -->
        <div class="form-group">
            {{ form.email.label }}<br>
            {{ form.email(size=32, class="form-control") }}
            {% for error in form.email.errors %}
                <span class="error">{{ error }}</span>
            {% endfor %}
        </div>

        <!-- 密碼 -->
        <div class="form-group">
            {{ form.password.label }}<br>
            {{ form.password(size=32, class="form-control") }}
            {% for error in form.password.errors %}
                <span class="error">{{ error }}</span>
            {% endfor %}
        </div>

        <!-- 提交按鈕 -->
        {{ form.submit(class="btn btn-primary") }}
    </form>
</body>
</html>

2. 數據展示模板（dashboard.html）¶

<!-- templates/dashboard.html -->
<!DOCTYPE html>
<html>
<head>
    <title>登錄成功</title>
</head>
<body>
    <h1>歡迎來到儀表盤</h1>
    <p>這裏將展示用戶數據，例如：</p>
    <ul>
        <li>用戶名：{{ session.get('username') }}</li>  <!-- 假設在視圖中存儲了session -->
        <li>郵箱：{{ session.get('email') }}</li>
    </ul>
</body>
</html>

四、關鍵細節解析¶

1. CSRF保護¶

Flask-WTF默認啓用CSRF保護，通過form.hidden_tag()自動生成CSRF令牌。必須在模板中添加此標籤，否則表單提交會失敗。

2. 數據驗證¶

form.validate_on_submit()會自動執行所有驗證規則。如果驗證失敗，錯誤信息會存儲在form.<字段名>.errors中，在模板中通過循環顯示。

3. 避免重複提交¶

使用重定向（如redirect(url_for('dashboard'))）替代直接返回模板，防止用戶刷新頁面導致重複提交。

4. 數據存儲¶

示例中直接獲取form.<字段>.data，實際開發中需將數據保存到數據庫（如SQLAlchemy），並對密碼進行加密處理（如使用bcrypt）。

五、完整流程總結¶

用戶填寫表單：通過login.html渲染的表單輸入數據
前端驗證：瀏覽器自動檢查必填項和格式（如郵箱格式）
後端驗證：Flask-WTF驗證數據合法性（如長度、格式）
數據處理：驗證通過後，獲取數據並進行業務邏輯處理（如登錄驗證）
結果展示：通過dashboard.html展示處理後的數據

六、進階提示¶

自定義驗證器：如需更復雜的驗證（如用戶名是否已存在），可在表單類中定義方法：

  def validate_username(self, field):
      if User.query.filter_by(username=field.data).first():
          raise ValidationError('用戶名已被註冊')

多表單處理：通過FlaskForm類可創建多類型表單，使用form = MultiForm(request.form)合併數據
文件上傳：結合FileField和FileAllowed驗證器，可實現圖片/文件上傳

通過以上步驟，您已掌握了Flask表單處理的核心流程。從表單定義、請求處理到數據展示，每個環節都確保了用戶體驗和數據安全。實踐中可根據需求擴展功能，如添加數據庫交互、權限控制等。