Flask 如何在模态框中显示 wtform 验证错误

在本文中，我们将介绍如何使用 Flask 和 WTForms 在模态框中显示表单验证错误。WTForms 是一个用于处理表单的Python扩展库，而Flask则是一个基于Python的轻量级Web应用框架。

阅读更多：Flask 教程

1. 前提条件

在开始之前，需要确保已经安装了 Flask 和 WTForms。可以使用以下命令进行安装：

pip install Flask
pip install WTForms

2. 创建Flask应用

首先，我们需要创建一个基本的Flask应用。在你的项目目录下创建一个新的Python文件，命名为app.py，并添加以下内容：

from flask import Flask, render_template, request
from flask_wtf import FlaskForm
from wtforms import StringField, SubmitField
from wtforms.validators import DataRequired

app = Flask(__name__)
app.config['SECRET_KEY'] = 'your-secret-key'

# 创建表单类
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 'Success!'
    return render_template('index.html', form=form)

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

上述代码中，我们首先导入了Flask的必要模块。然后，我们创建了一个名为MyForm的表单类，其中包含一个名为name的文本字段和一个提交按钮。name字段使用了DataRequired验证器，它会确保该字段不为空。接下来我们创建了一个index路由，当提交表单时会进行验证，如果验证通过，则返回”Success!”，否则会渲染index.html模板并将表单form传递给模板。

3. 创建模板

接下来，我们需要创建一个模板来渲染表单。在项目目录下创建一个名为templates的文件夹，然后在该文件夹下创建一个名为index.html的模板文件，并添加以下内容：

<!DOCTYPE html>
<html>
<head>
    <title>Flask Form</title>
    <!-- 引入Bootstrap样式 -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <h1>Flask Form</h1>
        <hr>
        <form method="POST" action="{{ url_for('index') }}">
            <!-- 表单字段 -->
            {{ form.csrf_token }}
            <div class="form-group">
                {{ form.name.label }}{{ form.name }}</br>
                <!-- 显示验证错误 -->
                {% if form.name.errors %}
                    {% for error in form.name.errors %}
                        <span class="text-danger">{{ error }}</span></br>
                    {% endfor %}
                {% endif %}
            </div>
            {{ form.submit(class="btn btn-primary") }}
        </form>
    </div>
</body>
</html>

在上述模板中，我们首先引入了Bootstrap的样式，并创建了一个简单的表单。在表单字段下方，我们使用了条件语句来判断是否有验证错误，并将错误信息以红色文本的形式显示出来。