Flask表单与表单验证实现流程介绍

下面我将对"Flask表单与表单验证实现流程介绍"进行详细讲解。

一、Flask表单

1.1 WTForms简介

WTForms是一个用于验证表单数据的Python库。使用它可以很简单地为你的Flask应用程序添加表单支持。它可以完成以下任务：

• 生成HTML渲染的表单
• 验证表单数据的完整性和正确性
• 在验证失败时，向用户显示错误消息

1.2 Flask-WTF库安装

在 Flask 中，我们可以使用 Flask-WTF 库来简化 WTForms 的使用。安装 Flask-WTF 库的命令如下：

pip install Flask-WTF

1.3 WTForms表单定义

定义表单需要创建一个类，这个类应该继承自flask_wtf.FlaskForm。对于表单中的每个字段，我们会在表单类中定义一个属性。

在 WTForms 中，我们定义字段的方式如下：

from wtforms import StringField, SubmitField
from wtforms.validators import DataRequired

class MyForm(FlaskForm):
    name = StringField('姓名', validators=[DataRequired()])
    address = StringField('地址', validators=[DataRequired()])
    submit = SubmitField('提交')

在这个表单类中，我们定义了三个字段，分别是“姓名”、“地址”和“提交”按钮。StringField定义了文本字段，SubmitField定义了提交按钮，DataRequired()是一个验证器，这里会检查字段是否为空。

1.4 在模板中渲染表单

{% extends "base.html" %}

{% block content %}

<h1>我的表单</h1>

<form method="POST" action="{{ url_for('submit') }}">
    {{ form.csrf_token }}
    {{ form.name.label }} {{ form.name }}
    <br>
    {{ form.address.label }} {{ form.address }}
    <br>
    {{ form.submit }}
</form>

{% endblock %}

在模板中渲染表单，我们可以使用 WTForms 提供的csrf_token生成 CSRF 令牌（包含表单中每个字段的 HTML 代码）。这可以避免跨站点请求伪造（Cross-Site Request Forgery）攻击。直接使用{{ form.field }}语法即可渲染表单字段。

1.5 在视图函数中处理表单

from flask import render_template
from app import app
from app.forms import MyForm

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

在提交表单之后，我们需要处理表单数据。我们在这个视图函数中先实例化表单对象，然后通过form.validate_on_submit()方法来检查是否有数据被提交，如果有则从表单中获取数据并进行相应的处理。

1.6 错误处理

如果表单验证失败，我们需要告诉用户哪些信息有误。对于 WTForms 表单，我们可以使用form.errors属性来获取错误信息。

{% if form.errors %}
    <div class="alert alert-danger">
    {% for field, errors in form.errors.items() %}
        {% for error in errors %}
            <p>{{ field.label }} - {{ error }}</p>
        {% endfor %}
    {% endfor %}
    </div>
{% endif %}

二、表单验证实现流程介绍

2.1 安装Flask-WTF

$ pip install Flask-WTF

2.2 导入Flask-WTF的模块

from flask_wtf import FlaskForm
from wtforms import StringField, SubmitField
from wtforms.validators import DataRequired, Email, ValidationError

在这个例子中，我们将使用StringField和SubmitField两个字段以及DataRequired和Email两个验证器。

2.3 创建表单

class RegistrationForm(FlaskForm):
    name = StringField('Name：', validators=[DataRequired()])
    email = StringField('Email：', validators=[DataRequired(), Email()])
    phone = StringField('Phone：', validators=[DataRequired()])
    submit = SubmitField('Submit')

这里创建了一个名为RegistrationForm的表单。该表单包含名字、电子邮件、电话和提交按钮四个字段。

2.4 实现表单验证

对于每个字段，我们都可以指定一个或多个验证器，这些验证器将对表单数据进行验证。如果验证失败，则要提供相应的错误消息。

class RegistrationForm(FlaskForm):
    name = StringField('Name：', validators=[DataRequired()])
    email = StringField('Email：', validators=[DataRequired(), Email()])
    phone = StringField('Phone：', validators=[DataRequired()])

    def validate_phone(self,phone):
        if not len(phone.data)==11:
            raise ValidationError('Phone number must be 11 digits long.')

    submit = SubmitField('Submit')

在这个例子中，我们添加了一个验证器validate_phone，用于确保电话号码是 11 位。如果电话号码不是 11 位，则会引发ValidationError异常。

2.5 显示错误消息

当表单验证失败时，我们需要向用户显示错误消息。在模板中使用以下代码可以输出所有错误：

{% for error in form.errors %}
    <div class="alert alert-danger">
        <strong>Error:</strong> {{ error }}
    </div>
{% endfor %}

另外，你还可以使用以下代码输出特定字段的错误：

{% if form.email.errors %}
    <div class="alert alert-danger">
        <strong>Error:</strong> {{ form.email.errors[0] }}
    </div>
{% endif %}

2.6 在视图函数中处理表单

@app.route('/register', methods=['GET', 'POST'])
def register():
    form = RegistrationForm()
    if form.validate_on_submit():
        flash('Congratulations! You have successfully registered.')
        return redirect(url_for('register'))
    return render_template('register.html', form=form)

在这个视图函数中，我们先实例化表单对象，然后在表单验证成功时返回一条成功消息并重定向到注册页面。如果验证失败，则处理有关表单错误的信息并重新渲染表单。