Flask表单:表单的创建与渲染

使用Flask-WTF创建和渲染表单

Flask-WTF是一个集成了WTForms的Flask扩展,使用它你可以在python文件里创建表单类,然后在HTML使用它提供的函数渲染表单。

Flask-WTF

Flask-WTF

跨站请求伪造保护

Flask-WTF默认支持CSRF(跨站请求伪造)保护,只需要在程序中设置一个密钥。Flask-WTF使用这个密钥生成加密令牌,再用令牌验证表单中数据的真伪。(关于Flask项目的配置和初始化,后续文章会谈到)你可以使用app.config字典来存储配置变量:

或是从系统环境变量中获取

很多重要的信息,比如邮箱账户和密码都不能直接写在程序里,而要设置系统环境变量,设置方法如下(Windows):

*Unix用户使用export替换set。
注意,后面的字符串不需要用任何符号括起来。

创建表单

然后我们就可以开始创建表单了,以一个简单的登录表单为例,首先是导入:

从Flask-WTF导入Form类,而表单字段和验证函数直接从WTForms导入。

每个表单都用一个继承自Form的类表示,每个字段都用一个对象表示,每个对象可以附加多个验证函数。常见的验证函数有Required(),Length(),Email()等。

在Flask-WTF 0.13版本,引入的表单类为FlaskForm;
在WTForms 3.0版本,验证函数Required变为DataRequired

然后是我们的表单类:

在验证函数中传入出错时的提示信息,覆盖默认的英文错误提示。

参考链接:

表单渲染

首先需要在视图函数里引入一个表单类的实例,然后在返回模板的时候,传入这个实例:

在HTML文件(login.html)里,我们使用下面的方式来渲染表单:

这种方式渲染出来的表单没有样式(字段后面的括号里可以填入input属性,如果不填可以省略掉括号,控制表单样式内容见续篇《自定义表单样式》),而且比较繁琐,你也可以使用for循环来遍历字段。

关于form.hidden_tag()

上面说了,Flask-WTF支持跨站请求伪造保护,所以它会为你的表单类自动创建一个CSRF字段,你需要在表单里渲染这个字段:{{ form.csrf_token }}。

而如果你有多个隐藏字段(type属性为hidden)的话,就可以使用{{ form.hidden_tag() }}来渲染所有隐藏字段。

 

使用Flask-Bootstrap渲染表单

Flask-Bootstrap是一个集成了Bootstrap的Flask扩展,它提供了一些表单渲染的函数,可以让我们方便的渲染Bootstrap样式的表单。

要使用这些函数,首先你要安装Flask-WTF,然后在HTML文件开头引入提供这些函数的模板文件(wtf.html):

使用Flask-Bootstrap提供的wtf.form_field()函数来渲染表单:

假如你不需要调整Boostrap的默认表单样式,只想要快速生成表单,那么Flask-Bootstrap还提供了一个强大的函数,只需要一行就可以快速生成表单:

 

纯HTML表单或混合

你可以把你想定义的字段与Flask-WTF的渲染字段混在一起,比如像这样直接将确认按钮写在模板里:

注:在视图函数里获取数据时,Flask-WTF不验证是否按下了确认按钮,只是判断HTTP方法。

你也可以不使用Flask-WTF,直接把表单写在HTML模板里。这在一些特殊情况下,反而会比使用Flask-WTF更加方便。比如在小项目里,或是需要高度自定义的情况下。在上一个Flask实践项目计时器里,传入时间参数的表单就是直接写在HTML里的:

需要注意的是,这时要给表单添加一个action属性,属性值填写要处理表单数据的视图函数。下一篇文章会详细谈到怎么处理表单的数据。

Flask扩展一般通过安装pip安装(注意要安装在虚拟环境,别忘了激活虚拟环境后再安装):

注意导入时名称的变化,《Flask Web开发》中使用flask.ext.extension_name导入扩展的方式被废弃,使用下面的方式(flask_extension_name)导入扩展中的函数或类:

*考虑写一篇文章讲一下扩展的安装、初始化和配置

 

参考链接

  1. Cross-site request forgery
  2. Flask-WTF – Flask-WTF 0.13
  3. WTForms Documentation
  4. http://flask.pocoo.org/docs/0.11/patterns/wtforms/
  5. http://flask.pocoo.org/snippets/category/forms/

– – – – –

更多关于Flask的优质内容,欢迎关注Hello, Flask! – 知乎专栏

说说你的想法吧!

邮箱不会被公开,必填项已用*标出。

*

*