一、安装flask-wtf和跨站请求伪造保护(CSRF)

#  pyCharm Terminal                #安装pip install flask-wtf

#  test.pyapp = Flask(__name__)
app.config['SECRET_KEY'] = 'hard to guess string'        #设置app的config字典

app的config字典用来存储框架、扩展和程序本身的配置变量。

二、使用flask-wtf

#  test.pyfrom flask_wtf import FlaskForm                        #引入FlaskForm类，作为自定义Form类的基类
from wtforms import StringField,SubmitField           #StringField对应HTML中type="text"的<input>元素，SubmitField对应type='submit'的<input>元素
from wtforms.validators import Required                #引入验证函数class NameForm(FlaskForm):name = StringField('What is your name?',validators=[Required()])submit = SubmitField('Submit')

在这个示例中，NameForm表单有一个 名为name的文本字段（我感觉类似于Qt中的QLineEdit类）和一个名为submit的提交按钮（感觉类似于Qt中的QPushButton类）。字段（StringField和SubmitField）的构造函数的第一参数对应HTML的标号（用以显示的字）。

name = StringField('What is your name?',validators=[Required()])

validators指定一个由验证函数组成的列表。(验证函数，我感觉就是对用户输入的一种检查：排除非法输入）。

附：WTFForms支持的HTML标注字段

字段类型说　　明
StringField 文本字段
TextAreaField                                                       多行文本字段
PasswordField                                                                     密码文本字段
HiddenField                                                                         隐藏文本字段
DateField                                                             文本字段，值为 datetime.date 格式
DateTimeField                                                     文本字段，值为 datetime.datetime 格式
IntegerField                                                             文本字段，值为整数
DecimalField                                                             文本字段，值为 decimal.Decimal
FloatField                                                                         文本字段，值为浮点数
BooleanField                                                                     复选框，值为 True 和 False
RadioField                                                                                 一组单选框
SelectField                                                                                 下拉列表
SelectMultipleField                                                             下拉列表，可选择多个值
FileField                                                                                                     文件上传字段
SubmitField                                                                                         表单提交按钮
FormField                                                                             把表单作为字段嵌入另一个表单
FieldList                                                                             一组指定类型的字段

附：WTForms 内建的验证函数

函数说明

Email                                                                                             验证电子邮件地址
EqualTo                                                                比较两个字段的值；常用于要求输入两次密码进行确认的情况
IPAddress                                                                                验证 IPv4 网络地址
Length                                                                                        验证输入字符串的长度
NumberRange                                                                验证输入的值在数字范围内
Optional                                                                            无输入值时跳过其他验证函数
Required                                                                                确保字段中有数据
Regexp                                                                            使用正则表达式验证输入值
URL           验证 URL
AnyOf                                                                            确保输入值在可选值列表中

NoneOf 确保输入值不在可选值列表中

三、把表单渲染成HTML

#  index.html{% extends "base.html" %}{% block title %}Flasky{% endblock %}{% block navbar %}
<div class="navbar navbar-inverse" role="navigation"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="/">Flasky</a></div><div class="navbar-collapse collapse"><ul class="nav navbar-nav"><li><a href="/">Home</a></li></ul></div></div>
</div>
{% endblock %}{% block content %}                                            #正文block
<div class="container"><div class="page-header"><h1>Hello, {{ name }}!</h1>                            #需要传入的变量{{ name }}</div><form method="post">                                        #需要传入的变量form类{{ form.hidden_tag() }}                                 #调用form.hidden_tag()方法{{ form.name.label }}{{ form.name() }}                  #同上{{ form.submit() }}</form>
</div>
{% endblock %}

四、使用Bootstrap中的表单样式

# index.html{% import "bootstrap/wtf.html" as wtf %}                        #引入wtf.html中的定义，并起别名wtf（类比python模块）{% block content %}
<div class="container"><div class="page-header"><h1>Hello, {{ name }}!</h1></div><form method="post">{{ form.hidden_tag() }}{{ form.name.label }}{{ form.name() }}{{ form.submit() }}</form>{{ wtf.quick_form(form) }}                                #wtf.quick_form(form)使用默认的样式渲染form
</div>
{% endblock %}

五、提交表单整个工作流程（重点）

1、客户端输入URL，访问服务器。向服务器发出一个GET请求

2、服务器收到请求。进入视图函数(index())处理。

# tset.py@app.route("/",methods=['GET','POST'])
def index():name = Noneform = NameForm()if form.validate_on_submit():        #服务器收到没有表单数据的GET请求 ，因此form.validate_on_submit() == Falsename = form.name.data            #不执行，跳过form.name.data=''                #不执行 ，跳过return render_template('index.html',name=name,form=form)            #把name,form变量传入模板，渲染，返回给客户端。

3、客户端收到并显示表单

4、用户输入并提交表单

5、服务器收到包含数据的POST请求

6、再进视图函数,validate_on_submit()函数调用验证函数（Required()），验证通过返回True，否则返回False.

# test.py@app.route("/",methods=['GET','POST'])
def index():name = Noneform = NameForm()if form.validate_on_submit():                            #返回Truename = form.name.data                                #执行 form.name.data=''                                    #执行return render_template('index.html',name=name,form=form)  #把name,form变量传入模板，渲染，返回。

7、客户端最终效果

Python Flask学习_使用Flask-wtf和web表单相关推荐

web表单设计:点石成金_如何设计安全的Web表单：验证，清理和控制
web表单设计:点石成金 While cybersecurity is often thought of in terms of databases and architecture, much of ...
Flask之Web表单使用
Web表单使用 @(Flask) request对象包含客户端发出的所有请求信息. request.form能获取POST请求中提交的表单数据. 使用的包 Flask-WTF可以把处理Web表单的过程 ...
Flask开发系列之Web表单
Flask开发系列之Web表单简单示例 from flask import Flask, request, render_templateapp = Flask(__name__) @app.rou ...
Flask Web表单
title: flask学习笔记 subtitle: 3. flask Web表单 date: 2018-12-14 10:17:28 --- Web表单 HTML表单是用户和web站点或应用程序之间 ...
Flask实践——microblog WEB表单 (3)
WEB表单配置创建microblog/config.py CSRF_ENABLED = True SECRET_KEY = 'you-will-never-guess' 修改app/__init_ ...
Python语言学习之pandas：DataFrame二维表的简介、常用函数、常用案例之详细攻略
Python语言学习之pandas:DataFrame二维表的简介.常用函数.常用案例之详细攻略目录 DataFrame的简介 DataFrame的常用案例 1.写入和读取excel表格文件
Python语言学习之pandas：DataFrame二维表的简介、常用函数、常用案例(增删改查排序之选择指定列、根据条件选择特定数据、赋值、列名重命名、修改列数据、处理缺失值、列合并、分组之详细攻略
Python语言学习之pandas:DataFrame二维表的简介.常用函数.常用案例(增删改查排序之选择指定列.根据条件选择特定数据.赋值.列名重命名.修改列数据.处理缺失值.列合并.分组之详细攻略 ...
wps python 自动化_Python3+Selenium+Chrome实现自动填写WPS表单
引言本文通过python3.第三方python库Selenium和谷歌浏览器Chrome,完成WPS表单的自动填写. 开发环境配置 python3的安装:略,网上都有教程. Selenium的安装: ...
jQuery框架学习第十一天：实战jQuery表单验证及jQuery自动完成提示插件
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQ ...
C1认证学习十八、十九（表单元素、转义字符）
C1认证学习十八.十九(表单元素.语义化标签) 十八任务背景 HTML的表单用于收集用户的输入,表单元素是指的不同类型的input元素,复选框,单选按钮,提交按钮等等. 任务目标掌握表单标签以及其 ...

Python Flask学习_使用Flask-wtf和web表单