创建表单

这部分文档涉及表单(Form)信息。

安全表单

无需任何配置,Form 是一个带有 CSRF 保护的并且会话安全的表单。我们鼓励你什么都不做。

但是如果你想要禁用 CSRF 保护,你可以这样:

form = Form(csrf_enabled=False)

如果你想要全局禁用 CSRF 保护,你真的不应该这样做。但是你要坚持这样做的话,你可以在配置中这样写:

WTF_CSRF_ENABLED = False

为了生成 CSRF 令牌,你必须有一个密钥,这通常与你的 Flask 应用密钥一致。如果你想使用不同的密钥,可在配置中指定:

WTF_CSRF_SECRET_KEY = 'a random string'

文件上传

Flask-WTF 提供 FileField 来处理文件上传,它在表单提交后,自动从 flask.request.files 中抽取数据。FileFielddata 属性是一个 Werkzeug FileStorage 实例。

例如:

from werkzeug import secure_filename
from flask_wtf.file import FileField

class PhotoForm(Form):
    photo = FileField('Your photo')

@app.route('/upload/', methods=('GET', 'POST'))
def upload():
    form = PhotoForm()
    if form.validate_on_submit():
        filename = secure_filename(form.photo.data.filename)
        form.photo.data.save('uploads/' + filename)
    else:
        filename = None
    return render_template('upload.html', form=form, filename=filename)

Note

记得把你的 HTML 表单的 enctype 设置成 multipart/form-data,既是:

<form action="/upload/" method="POST" enctype="multipart/form-data">
    ....
</form>

此外,Flask-WTF 支持文件上传的验证。提供了 FileRequiredFileAllowed

FileAllowed 能够很好地和 Flask-Uploads 一起协同工作, 例如:

from flask.ext.uploads import UploadSet, IMAGES
from flask_wtf import Form
from flask_wtf.file import FileField, FileAllowed, FileRequired

images = UploadSet('images', IMAGES)

class UploadForm(Form):
    upload = FileField('image', validators=[
        FileRequired(),
        FileAllowed(images, 'Images only!')
    ])

也能在没有 Flask-Uploads 下挑大梁。这时候你需要向 FileAllowed 传入扩展名即可:

class UploadForm(Form):
    upload = FileField('image', validators=[
        FileRequired(),
        FileAllowed(['jpg', 'png'], 'Images only!')
    ])

HTML5 控件

Note

自 wtforms 1.0.5 版本开始,wtforms 就内嵌了 HTML5 控件和字段。如果可能的话,你可以考虑从 wtforms 中导入它们。

我们将会在 0.9.3 版本后移除 html5 模块。

你可以从 wtforms 中导入一些 HTML5 控件:

from wtforms.fields.html5 import URLField
from wtforms.validators import url

class LinkForm(Form):
    url = URLField(validators=[url()])

验证码

Flask-WTF 通过 RecaptchaField 也提供对验证码的支持:

from flask_wtf import Form, RecaptchaField
from wtforms import TextField

class SignupForm(Form):
    username = TextField('Username')
    recaptcha = RecaptchaField()

这伴随着诸多配置,你需要逐一地配置它们。

RECAPTCHA_PUBLIC_KEY 必须 公钥
RECAPTCHA_PRIVATE_KEY 必须 私钥
RECAPTCHA_API_SERVER 可选 验证码 API 服务器
RECAPTCHA_PARAMETERS 可选 一个 JavaScript(api.js)参数的字典
RECAPTCHA_DATA_ATTRS 可选 一个数据属性项列表 https://developers.google.com/recaptcha/docs/display

RECAPTCHA_PARAMETERS 和 RECAPTCHA_DATA_ATTRS 的示例:

RECAPTCHA_PARAMETERS = {'hl': 'zh', 'render': 'explicit'}
RECAPTCHA_DATA_ATTRS = {'theme': 'dark'}

对于应用测试时,如果 app.testingTrue ,考虑到方便测试,Recaptcha 字段总是有效的。

在模板中很容易添加 Recaptcha 字段:

<form action="/" method="post">
    {{ form.username }}
    {{ form.recaptcha }}
</form>

我们为你提供了例子: recaptcha@github