Flask-WTF 扩展可以把处理 Web 表单,这个扩展对独立的
WTForms 包进行了包装,方便集成到Flask应用中。

1. 配置

与其他多数扩展不同,Flask-WTF 无须在应用层初始化,但是它要求应用配置一个密钥。密钥是一个由随机字符构成的唯一字符串,通过加密或签名以不同的方式提升应用的安全性。Flask 使用这个密钥保护用户会话,以防被篡改。

配置 Flask-WTF:

app = Flask(_name_)
app.config['SECRET_KEY'] = 'hard to guess string'

2. 表单类

使用 Flask-WTF 时,在服务器端,每个 Web 表单都由一个继承自 FlaskForm 的类表示。这个类定义表单中的一个字段,每个字段都用对象表示。字段对象可附属一个或多个验证函数。
验证函数用于验证用户提交的数据是否有效。

定义表单类:

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

class NameForm(FlaskForm):
	name = StringField('What is your name?', validators=[DataRequired()])
	submit = SubmitField('Submit')

验证函数 DataRequired() 确保提交的字段内容不为空。

WTForms支持的HTML标准字段:

字段类型说明
BooleanField复选框,值为 True 和 False
DateField文本字段,值为 datetime.data 格式
DateTimeField文本字段,值为 datetime.datetime 格式
DecimalField文本字段,值为 decimal.Decimal
FileField文件上传字段
HiddenField隐藏的文本字段
MultipleField多文件上传字段
FieldList一组指定类型的字段
FloatField文本字段,值为浮点数
FormField把一个表单作为字段嵌入另一个表单
IntegerField文本字段,值为整数
PasswordField密码文本字段
RadioField一组单选按钮
SelectField下拉列表
SelectMultipleField下拉列表,可选择多个值
SubmitField表单提交按钮
StringField文本字段
TextAreaField多行文本字段

WTForms验证函数:

验证函数说明
DataRequired确保转换类型后字段中有数据
Email验证电子邮件地址
EqulTo比较两个字段的值;常用于要求输入两次密码进行确认的情况
InputRequired确保转换类型前字段中有数据
IPAddress验证 IPv4 网络地址
Length验证输入字符串的长度
MacAddress验证 MAC 地址
NumberRange验证输入的值在数字范围之内
Optional允许字段中没有输入,将跳过其他验证函数
Regexp使用正则表达式验证输入值
URL验证 URL
UUID验证 UUID
AnyOf确保输入值在一组可能的值中
NoneOf确保输入值不在一组可能的值中

3. 在视图函数中处理表单

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

app.route 装饰器中多出的methods 参数告诉Flask,在URL映射中把这个视图函数注册为GET 和POST 请求的处理程序。如果没指定methods参数,则只把视图函数注册为GET请求的处理程序。
这里有必要把POST加入方法列表,因为更常使用POST请求处理表单提交。表单也可以通过GET 请求提交,但是GET请求没有主体,提交的数据以查询字符串的形式附加到URL中,在浏览器的地址栏中可见。基于这个以及其他多个原因,处理表单提交几乎都使用POST请求。

index.html:

示例4-3 templates/index.html:使用 Flask-WTF 和 Flask-Bootstrap 渲染表单
{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
{% block title %}Flasky{% endblock %}
{% block page_content %}
<div class="page-header">
    <h1>Hello, {% if name %}{{ name }}{% else %}Stranger{% endif %}!</h1>
</div>
{{ wtf.quick_form(form) }}

<div class="container">

</div>
<div class="container">
    <p>The local date and time is {{ moment(current_time).format('LLL') }}.</p>
<p>That was {{ moment(current_time).fromNow(refresh=True) }}</p>
</div>
{% endblock %}

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

Logo

欢迎加入西安开发者社区!我们致力于为西安地区的开发者提供学习、合作和成长的机会。参与我们的活动,与专家分享最新技术趋势,解决挑战,探索创新。加入我们,共同打造技术社区!

更多推荐