如何在Flask中用Jinja2结合WTForms获取Bootstrap Switch输入？

针对你的Flask应用需求，这里是完整的实现步骤，包含表单定义、视图处理和模板渲染：

1. 定义WTForms表单类 #

用BooleanField对应Bootstrap Switch（本质是复选框），默认未勾选的字段无需额外设置，需要初始勾选的字段设置default=True：

from flask_wtf import FlaskForm
from wtforms import BooleanField, SubmitField

class FeatureSwitchForm(FlaskForm):
    # 默认未勾选的开关
    default_switch = BooleanField('Default switch checkbox input')
    # 初始已勾选的开关
    checked_switch = BooleanField('Checked switch checkbox input', default=True)
    submit = SubmitField('提交')

2. Flask视图处理表单 #

在视图中初始化表单，处理GET/POST请求，提交后直接获取开关的布尔值：

from flask import Flask, render_template

app = Flask(__name__)
app.config['SECRET_KEY'] = 'your-secret-key-here'  # 必填，用于CSRF保护

@app.route('/switch', methods=['GET', 'POST'])
def switch_page():
    form = FeatureSwitchForm()
    if form.validate_on_submit():
        # 获取开关状态，返回True/False
        default_status = form.default_switch.data
        checked_status = form.checked_switch.data
        
        # 根据状态处理功能逻辑
        if default_status:
            # 启用默认开关对应的功能
            pass
        if checked_status:
            # 启用已勾选开关对应的功能
            pass
        
        # 这里可以重定向或返回结果，示例直接返回状态
        return f"默认开关: {default_status}, 已勾选开关: {checked_status}"
    # GET请求时渲染表单
    return render_template('switch_form.html', form=form)

3. Jinja2模板渲染Bootstrap Switch #

在模板中结合WTForms字段和Bootstrap的样式结构，记得添加CSRF令牌：

<form method="POST">
    {{ form.hidden_tag() }}  <!-- 生成CSRF令牌，必须添加 -->
    
    <!-- 默认未勾选的开关 -->
    <div class="form-check form-switch mb-3">
        {{ form.default_switch(class="form-check-input", id="flexSwitchCheckDefault") }}
        {{ form.default_switch.label(class="form-check-label", for="flexSwitchCheckDefault") }}
    </div>
    
    <!-- 初始已勾选的开关 -->
    <div class="form-check form-switch mb-3">
        {{ form.checked_switch(class="form-check-input", id="flexSwitchCheckChecked") }}
        {{ form.checked_switch.label(class="form-check-label", for="flexSwitchCheckChecked") }}
    </div>
    
    {{ form.submit(class="btn btn-primary") }}
</form>

关键说明 #

• Bootstrap Switch本质是美化的复选框，WTForms用BooleanField完全适配，自动处理checked属性。
• form.hidden_tag()是Flask-WTF的CSRF保护机制，必须包含，否则表单验证会失败。
• 提交后通过form.字段名.data直接获取布尔值，用于判断是否启用对应功能即可。

内容的提问来源于stack exchange，提问作者Mahfuzur Rahman