13

Flask笔记（5）：表单

 4 years ago
source link: https://greyli.com/flask-note-5-forms/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Flask笔记（5）：表单

Flask有众多的扩展来简化集成各种常用的库和框架，比如Flask-Bootstrap集成了Bootstrap，Flask-WTF集成了WTForms。这篇要介绍的就是Flask-WTF。

安装和配置

安装很简单，使用pip：

pip install flask-wtf

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

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

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

app = Flask(__name__)
app.config['SECRET_KEY'] = os.environ.get('SECRET_KEY')

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

set SECRET_KEY=very very hard to guess string

后面的字符串不需要用任何符号括起来。

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

from flask_wtf import Form # 导入Form
from wtforms import StringField, SubmitField, RadioField, PasswordField, BooleanField # 导入字段
from wtforms.validators import Required, Length, Email # 导入验证函数
class LoginForm(Form):
    email = StringField(u'邮箱', validators=[Required(message= u'邮箱不能为空'), Length(1, 64), Email(message= u'请输入有效的邮箱地址，比如：[email protected]')])
    password = PasswordField(u'密码', validators=[Required(message= u'密码不能为空')])
    remember_me = BooleanField(u'记住我')
    submit = SubmitField(u'登录')
  • 在验证函数中传入出错时的提示信息，覆盖默认的英文错误提示。
  • WTForms支持的基本字段。
  • WTForms支持的验证函数。

表单有很多种渲染方式。
下面以一个撰写文章的表单为例。

默认的渲染方式

<form class="form" method="POST">
    {{ form.hidden_tag() }}
    {{ form.title.label }}{{ form.title() }}
    {{ form.body.label }}{{ form.body() }}
    {{ form.submit() }}
</form>

这种方式渲染出来的表单没有样式，而且很繁琐（当然，你也可以使用for循环来遍历字段）。

使用Flask-Bootstrap渲染

Flask-Bootstrap提供了一个模板（wtf.html），可以让你快速生成样式良好的表单。

{% import "bootstrap/wtf.html" as wtf %}
<form class="form" method="POST">
    {{ form.hidden_tag() }}
    {{ wtf.form_field(form.title) }}
    {{ wtf.form_field(form.body) }}
    {{ wtf.form_field(form.submit) }}
</form>

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

{% import "bootstrap/wtf.html" as wtf %}
{{ wtf.quick_form(form) }}

控制表单的样式

对于样式，可以通过给表单增加id或class来实现。比如这样：

{{ form.body.label }}{{ form.body(class="post-body") }} # 默认渲染
{{ wtf.form_field(form.body, class="post-body") }} # 使用Flask-Bootstrap渲染

也可以在表单类里传入参数，像这样：

body = TextAreaField(u'正文', validators=[Required(u'内容不能为空！')], render_kw={'rows': 20, 'placeholder': u'你有什么想法？'})

在表单字段里传入一个render_kw字典，将HTML的参数和值以键值对的形式写入字典。WTForms2.1及以上版本适用。

这里需要注意的是，Flask-Bootstrap会给表单添加class来控制样式，这时你再通过render_kw传入已经被定义过的参数会失败。所以，如果要使用render_kw传入class，得确保表单字段使用默认的渲染方式。

提交表单视图

这是一个添加文章的视图。

@main.route('/new/post', methods=['GET', 'POST'])
@login_required
def new_post():
form = PostForm()
if form.validate_on_submit():
    post = Post(
    title = form.title.data,
    body = form.body.data)
    db.session.add(post)
    db.session.commit()
    return redirect(url_for('.post', id=post.id))
return render_template('edit/new_post.html', form=form)

常见问题索引

  1. 一个页面里有多个表单
  2. 文件及多文件上传
  3. 文本编辑器支持
本条目发布于2016年10月11日。属于计算机与编程分类，被贴了 Flask、WTForms 标签。 ← Flask笔记索引 Flask问题集：单个页面两个（多个）表单 →

撰写评论 取消回复

电子邮件地址不会被公开，必填项已用*标出。

评论

姓名 *

电子邮件 *

站点

在此浏览器中保存我的名字、电邮和网站。

当有人回复我时，发送电子邮件提醒我。


report

Recommend

  • 12
    • greyli.com 4 years ago
    • Cache

    《Flask 入门教程》第 7 章：表单

    《Flask 入门教程》第 7 章：表单 发表回复 在 HTML 页面里，我们需要编写表单来获取用户输入。一个典型的表单如下所示： <fo...

  • 20
    • greyli.com 4 years ago
    • Cache

    Flask表单：自定义表单样式

    Flask表单：自定义表单样式 发表回复 这篇文章总结了控制表单样式的几种方式和常见的问题。 使用Flask-WTF 在表单类里控制样式

  • 6
    • greyli.com 4 years ago
    • Cache

    Flask表单：表单数据的验证与处理

    这篇文章作为上一篇的续篇，所以结构上也和上一篇一样。 使用Flask-WTF 这是一个登录的视图函数： @auth.route('/login', methods=['GET', 'POST'])def login():    form = LoginFor...

  • 11
    • greyli.com 4 years ago
    • Cache

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

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

  • 17
    • greyli.com 4 years ago
    • Cache

    Flask问题集：单个页面两个（多个）表单

    出于简化交互的考虑，我们经常见到很多网站把登录页面和注册界面放在同一个页面上，而当我们使用Flask来实现时，却发现问题重重： 不管是哪个表单按下了提交按钮，总是提交第一个表单的数据； 当一个表单数据验证出错时，两个表单都出现了...

  • 4
    • greyli.com 4 years ago
    • Cache

    Flask笔记索引

    Flask笔记索引 发表回复 这个系列的文章是我学习Flask的经验总结。大致按照《Flask Web开发》这本书的主要...

  • 9
    • greyli.com 4 years ago
    • Cache

    Flask笔记（1）：环境搭建与项目结构

    Flask笔记（1）：环境搭建与项目结构 发表回复 完成一个Flask项目需要三个工具： – git：用于版本控制 – pip：用来安装各种...

  • 10
    • 微信 mp.weixin.qq.com 4 years ago
    • Cache

    React 表单源码阅读笔记

    1 概念 1.1 什么是表单 实际上广义上的表单并不是特别好界定，维基上讲表单是一系列带有空格的文档，用于输写或选择。更具体的，在网页中表单主要负责数据采集的功能，我们下文中...

  • 12
    • blog.51cto.com 3 years ago
    • Cache

    Flask_Bootstrap框架表单模板【Flask企业课学习】

    Table of ContentsFlask已经有一段时间没有开发实战，忘记的差不多了，临近期末，有很多的作业要做，尤其是企业课每天三门课都要留作业，花费了一定的精力。企业课的Flask之Bootstrap框架运用是我之前没有系统学习过的。包头活动网站也用到了这个框...

  • 14
    • feiju12138.github.io 2 years ago
    • Cache

    【笔记】JS阻止表单提交

    JS利用onsubmit事件阻止表单提交 阻止表单提交<form id="form" action="#"> ... <input type="submit"></form> 如果onsubmit事件返回为true，...

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK