整合flask_bootstrap和Flask-WTForms实现表单验证

在Flask中使用表单验证是一种很常见的需求，可以借助Flask-WTForms和Flask-Bootstrap来实现这个功能。Flask-WTForms提供了一个易于使用的表单验证库，而Flask-Bootstrap为表单提供了漂亮的样式。

首先，确保你已经安装了Flask、Flask-WTForms和Flask-Bootstrap。可以通过在终端运行以下命令来安装它们：

pip install flask
pip install flask-wtforms
pip install flask-bootstrap

接下来，我们来创建一个简单的Flask应用，并实现一个包含表单验证的例子。创建一个名为app.py的Python文件，并在其中添加以下代码：

from flask import Flask, render_template, request, redirect, url_for
from flask_bootstrap import Bootstrap
from flask_wtf import FlaskForm
from wtforms import StringField, SubmitField
from wtforms.validators import DataRequired

app = Flask(__name__)
app.config['SECRET_KEY'] = 'mysecretkey'
bootstrap = Bootstrap(app)

class MyForm(FlaskForm):
    name = StringField('Name', validators=[DataRequired()])
    submit = SubmitField('Submit')

@app.route('/', methods=['GET', 'POST'])
def index():
    form = MyForm()
    if form.validate_on_submit():
        return redirect(url_for('success', name=form.name.data))
    return render_template('index.html', form=form)

@app.route('/success/<name>')
def success(name):
    return f'Success! Welcome {name}.'

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

在上面的代码中，我们首先导入了所需的库和模块。然后，我们创建了一个名为MyForm的表单类，它有一个名为name的字符串字段和一个名为submit的提交字段。在name字段中，我们使用了DataRequired验证器来确保字段不为空。

接下来，在主视图函数(index())中，我们首先实例化了MyForm类，并将其传递给模板。然后，我们检查表单是否已通过验证(form.validate_on_submit())，如果是，我们将用户重定向到一个成功页面，并通过URL参数传递name值。否则，我们渲染包含表单的页面。

在success()视图函数中，我们获取传递的name值，并返回一个欢迎消息。

下一步，我们需要创建一个HTML模板文件来渲染包含表单的页面。在同一目录下创建一个名为index.html的文件，添加以下代码：

{% extends "bootstrap/base.html" %}
{% import "bootstrap/wtf.html" as wtf %}

{% block title %}Flask Form Validation{% endblock %}

{% block content %}
<div class="container">
    <h1>Flask Form Validation</h1>
    <hr>
    <form method="POST">
        {{ form.csrf_token }}
        {{ wtf.form_field(form.name, class="form-control") }}
        {{ wtf.form_field(form.submit, class="btn btn-primary") }}
    </form>
</div>
{% endblock %}

在上面的代码中，我们首先将bootstrap/base.html扩展为基本模板。然后，我们将bootstrap/wtf.html作为wtf引入，以便能够使用样式化的表单字段。

在content块中，我们创建一个包含表单的容器，并使用wtf.form_field呈现表单字段。我们还在表单中添加了form.csrf_token字段，用于防止跨站请求伪造。

最后，我们需要运行应用程序。在终端中进入文件所在的目录，并运行以下命令：

python app.py

现在，你可以在浏览器中访问 http://localhost:5000，看到一个包含表单的页面。尝试提交表单，如果字段为空，你将收到一个错误消息。如果字段不为空，你将被重定向到显示成功消息的页面，并包含你输入的姓名。

通过整合Flask-WTForms和Flask-Bootstrap，我们能够轻松地实现表单验证，并使表单具有美观的样式。