1.表单类
使用Flask-WTF时,每个web表单都由继承自Form的类表示。这个类定义表单中的一组字段,每个字段都用对象表示。字段对象可以附属一个或多个验证函数。验证函数用来验证用户所提交的数据是否符合要求。
hello.py:定义表单类
StringField类表示属性为 type="text" 的 <input>元素。它的构造函数中的可选参数validators指定一个由验证函数组成的列表,在用户提交数据前验证其数据是否符合规范。from flask_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')
Required()验证函数:确保提交的字段不为空。
SubmitField类表示属性为 type="submit" 的 <input>元素。
2.把表单渲染成HTML
表单字段在模板中调用就会被渲染成HTML。条件允许情况下最好能使用Bootstrap中的表单样式。Flask-Bootstrap提供了一个辅助函数,可以一次调用从而渲染整个Flask-WTF表单。例:
bootstrap/wtf.html文件中定义了一个使用Bootstrap渲染Flask-WTF表单对象的辅助函数。wtf.quick_form()函数的参数为Flask-WTF表单对象。{% import "bootstrap/wtf.html" as wtf %} {{ wtf.quick_form(form) }}
完整模板:
templates/index.html:使用Flask-WTF和Flask-Bootstrap渲染表单
模板内容有两部分。第一部分时页面头部,显示欢迎信息。第二部分使用wtf.quick_form()函数来渲染NameForm对象。{% 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) }} {% endblock %}
3.在视图函数中处理表单
在hello.py中,视图函数index()不仅要渲染表单,还要接收表单中的数据。完整的hello.py函数如下:
hello.py:
from flask import Flask from flask import render_template from flask_wtf import Form from wtforms import StringField, SubmitField from wtforms.validators import Required from flask_bootstrap import Bootstrap app = Flask(__name__) bootstrap = Bootstrap(app) app.config['SECRET_KEY'] = 'yangdidi' class NameForm(Form): name = StringField('What is your name ?',validators=[Required()]) submit = SubmitField('Submit') @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.run(debug=True)
app.route()修饰器中method参数作用:在URL映射中把这个视图函数注册为GET和POST请求的处理程序。默认为GET请求的处理程序。
GET请求没有主体,提交的数据以查询字符串的形式附加到URL中,可以在浏览器的地址栏中看到,所以通常提交表单都是用POST请求处理。
视图函数中用name变量来存放表单中输入的有效名字,form来表示创建的NameForm类实例(表示表单)。提交表单后,若数据可以通过所有验证函数的验证,则返回True,
否则返回False。这个返回值决定重新渲染表单还是处理表单提交的数据。
当用户第一次访问程序时,服务器会收到一个没有表单数据的GET请求,所以验证函数validate_on_submit()将返回False,if语句不执行,通过渲染模板处理请求,并传入表单
对象和值为None的name变量作为参数,用户此时会看到浏览器显示了一个表单。如图所示:
用户提交表单后,服务器收到一个包含数据的POST请求,验证函数进行验证,若名字不为空,则通过验证,返回True。用户输入的名字可通过字段的data属性获得。
在if语句中,把名字赋值给变量name,然后再把data属性设置为空字符串,用来清空表单字段。最后调用render_template()函数渲染模板,这次name中的值不为空,所以
会显示一个针对用户的欢迎消息。如图所示: