在flask_bootstrap中使用Bootstrap的表单验证

发布时间：2023-12-19 04:42:45

在 Flask 中使用 Flask Bootstrap 可以方便地为表单添加 Bootstrap 的样式和验证。

首先需要安装 Flask Bootstrap。可以通过以下命令使用 pip 来安装：

pip install Flask-Bootstrap

安装完成后，在 Flask 应用程序中导入 Bootstrap，并在模板中使用 Bootstrap 的样式。

app.py 文件示例如下：

from flask import Flask, render_template
from flask_bootstrap import Bootstrap
from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField
from wtforms.validators import DataRequired, Email, EqualTo

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


class RegistrationForm(FlaskForm):
    username = StringField('Username', validators=[DataRequired()])
    email = StringField('Email', validators=[DataRequired(), Email()])
    password = PasswordField('Password', validators=[DataRequired()])
    confirm_password = PasswordField('Confirm Password', validators=[DataRequired(), EqualTo('password')])
    submit = SubmitField('Sign Up')


@app.route('/', methods=['GET', 'POST'])
def home():
    form = RegistrationForm()
    if form.validate_on_submit():
        # 处理表单提交逻辑
        # 在这里可以处理表单提交后的操作，例如保存用户注册信息到数据库中
        return 'Registration successful!'
    return render_template('index.html', form=form)


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

在上面的示例中，RegistrationForm 继承自 FlaskForm，并定义了需要的表单字段。FlaskForm 是 WTForms 提供的一种用于在 Flask 中处理表单的基类。

在模板文件 index.html 中，可以使用 Flask Bootstrap 提供的模板宏来渲染表单。

index.html 文件示例如下：

<!DOCTYPE html>
<html>
<head>
    <title>Registration Form</title>
    {{ form.bootstrap_find_errors() }}
</head>
<body>
    <h1>Registration Form</h1>
    <form method="POST" action="/">
        {{ form.hidden_tag() }}
        <div class="form-group">
            {{ form.username.label(class="form-control-label") }}
            {{ form.username(class="form-control") }}
            {% for error in form.username.errors %}
                <p class="error-message">{{ error }}</p>
            {% endfor %}
        </div>
        <div class="form-group">
            {{ form.email.label(class="form-control-label") }}
            {{ form.email(class="form-control") }}
            {% for error in form.email.errors %}
                <p class="error-message">{{ error }}</p>
            {% endfor %}
        </div>
        <div class="form-group">
            {{ form.password.label(class="form-control-label") }}
            {{ form.password(class="form-control") }}
            {% for error in form.password.errors %}
                <p class="error-message">{{ error }}</p>
            {% endfor %}
        </div>
        <div class="form-group">
            {{ form.confirm_password.label(class="form-control-label") }}
            {{ form.confirm_password(class="form-control") }}
            {% for error in form.confirm_password.errors %}
                <p class="error-message">{{ error }}</p>
            {% endfor %}
        </div>
        {{ form.submit(class="btn btn-primary") }}
    </form>
</body>
</html>

在上述代码中，form.bootstrap_find_errors() 会自动检测表单中的错误并添加 Bootstrap 的错误样式。

使用 Bootstrap 的样式渲染表单字段，只需要在对应的标签中设置相应的 class。

form.hidden_tag() 会生成一个包含 CSRF 令牌的隐藏字段，用于防止跨站请求伪造。

同时，需要在模板中显示表单验证错误的消息。可以通过以下方式来显示错误消息：

{% for error in form.fieldname.errors %}
    <p class="error-message">{{ error }}</p>
{% endfor %}

以上就是在 Flask 中使用 Flask Bootstrap 进行表单验证和使用 Bootstrap 样式的简单示例。