表单 Flask-WTF

1 配置

可以使用Flask-WTF来处理web表单，在使用之前要先配置下，打开config.py，编辑添加如下内容

WTF_CSRF_ENABLED = True
SECRET_KEY = 'you-will-never-guess'

WTF_CSRF_ENABLED设置为True主要是开启CSRF保护，SECRET_KEY是为了实现CSRF保护，Flask-WTF需要应用程序去配置一个加密密钥。Flask-WTF使用这个密钥去生成加密令牌用于验证请求表单数据的真实性，注：为了提高安全性，密钥应该存储在一个环境变量中，而不是嵌入到代码中。配置完成后要通知Flask去加载这个配置文件，编辑app/__init__.py，添加如下内容

from flask import Flask

app = Flask(__name__)
app.config.from_object('config')

from app import views

2 表单类

使用Flask-WTF时，每个web表单是由继承自 Form 类的子类来展现的。该类在表单中定义了一组表单域，每个都表示为一个对象。每个表单域都可以连接到一个或多个 validators ； validators 是一个用于检查用户提交的输入是否合法的函数，app/forms.py 专门用来存放表单类，用例

from flask.ext.wtf import Form
from wtforms import StringField, SubmitField 
from wtforms.validators import Required

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

示例中， NameForm 表单有一个 name 文本框和 submit 提交按钮。 StringField 类表示一个 type="text" 属性的 <input> 标签。 SubmitField 类表示一个 type="submit" 属性的 <input> 标签。表单域构造函数的第一个参数是一个 label ，在渲染表单到HTML时会使用。StringField 构造函数包含可选参数 validators ，它定义了一组检查来验证用户提交的数据。 Required() 验证确保提交的表单域不为空

WTForms标准HTML表单域

WTForms验证

3 表单渲染模版

假设视图函数传递一个参数名为 form 的NameForm 实例给模板，模板就会生成一个简单的HTML表单，如下所示：假设名字为nameform.html

<form method="POST">
    { { form.name.label }} { { form.name() }} 
    { { form.submit() }}
</form>

当然，结果是什么都没有。为了改变表单的外观显示，任何发送给该表单域的参数会被转换为HTML表单域属性；例如，你可以给定表单域 id 或 class 属性，然后定义CSS样式：即使有HTML属性，努力用这种方式渲染表单是非常重要的，所以最好是尽可能的使用Bootstrap自带的一系列表单样式。Flask-Bootstrap使用Bootstrap的预定义表单样式来提供高级的帮助函数来渲染整个Flask-WTF表单，这些操作都只需要一个调用即可完成

<form method="POST">
    { { form.name.label }} { { form.name(id='my-text-field') }} 
    { { form.submit() }}
</form>
---完善 nameform.html

<!-- extend from base layout -->

{% extends "base.html" %}

{% block content %}

  <h1>{{title}}</h1>

  <form action="" method="post" name="nameform">

      {{ form.hidden_tag() }}

      {{ form.name.label }} {{ form.name() }}

      {{ form.submit() }}

  </form>

{% endblock %}

4 视图函数使用表单

from .forms import NameForm

@app.route('/nameform', methods=['GET', 'POST'])

def nameform():

    form = NameForm()

    """

    处理接收表格数据，Flask-WTF让这个工作变得简单，validate_on_submit

    处理了所有表格的基本工作，只需要判断然后直接引用数据即可

    调用validate_on_submit时，这个函数会尝试接收用户提交的所有数据，然后做下表格校验，

    如果一切校验都通过，意味着数据可以被合法安全处理,如果校验不通过会直接刷新停在原来页面

    那如何做错误信息提示呢？

    """

    if form.validate_on_submit():

        flash('%s' %(form.name.data))

        return redirect('/index')

   

    return render_template('nameform.html',

                           title='nameform',

                           form=form)

效果

5 出错提醒

name再加个校验器，需要输入最少6个字符，最多35个字符

class NameForm(Form):
    name = StringField('What is your name?', validators=[Required()， validators.Length(min=6, max=35)]) 
    submit = SubmitField('Submit')

点击无反应，我们希望是能提示用户错误信息，在哪里加，在渲染的html模版里面，错误信息会存放到form.FieldName.errors里面，改进渲染模版

<!-- extend from base layout -->

{% extends "base.html" %}

{% block content %}

  <h1>{{title}}</h1>

  <form action="" method="post" name="nameform">

      {{ form.hidden_tag() }}

      <p>

           {{ form.name.label }} {{ form.name() }}

           {% for error in form.name.errors %}

          <span style="color: red;">[{{ error }}]</span>

      {% endfor %}

           </p>

          

           <p>

           {{ form.submit() }}

           </p>

  </form>

{% endblock %}