Flask 学习笔记 5--WTF 表单

2018/05/11 Flask

Web 表单

web 表单是 web 应用程序的基本功能。

它是 HTML 页面中负责数据采集的不见。表单由三个部分组成:表单标签、表单域、表单按钮。表单允许用户输入数据,负责 HTML 页面数据采集,通过表单将用户输入的数据提交给服务器。

在 Flask 中,为了处理 web 表单,我们一般使用 Flask-WTF 扩展,它封装了 WTForms,并且它有验证表单数据的功能。

WTForms 支持的 HTML 标准字段

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

WTForms 常用验证函数

验证函数 | 说明 —|— DataRequried | 确保字段中有数据 EqualTo | 比较两个字段的值,常用于比较两次密码输入 Length | 验证输入的字符串长度 NumberRange | 验证输入的值在数字范围内 URL | 验证 URL AnyOf | 验证输入值在可选列表中 NoneOf | 验证输入值不在可选列表中 使用 Flask-WTF 需要配置参数 SECRET_KEY。

CSRF_ENABLED 是为了 CSRF(跨站请求伪造)保护。SECRET_KEY 用来生成加密令牌,当 CSRF 激活的时候,该设置会根据设置的密匙生成加密令牌。在 HTML 页面中直接写 form 表单:

示例 - 使用普通方式实现表单

在 HTML 页面中直接写 form 表单:

<form method="post">
    <label > 用户名:</label><input type="text" name="username"> <br>
    <label > 密码:</label><input type="password" name="password"> <br>
    <label > 确认密码:</label><input type="password" name="password2"> <br>
    <input type="submit" value="提交"> <br>
    { % for message in get_flashed_messages() % }
        { { message } }
    { % endfor % }
</form>

视图函数中获取表单数据:

# -*- coding:utf-8 -*-

from flask import Flask, render_template, request, flash

app = Flask(__name__)

app.secret_key = 'qinbin'
'''
目的:实现一个简单的登录的逻辑处理
1. 路由需要有 get 和 post 两种请求方式 --> 需要判断请求方式
2. 获取请求的参数
3. 判断参数是否填写 & 密码是否相同
4. 如果判断都没有我呢提,就返回一个 success
''''''
给模板传递消息
flash --> 需要对内容加密。因此需要设置 secret_key,做加密消息的混淆
'''Python
@app.route('/', methods=['GET', 'POST'])
def index():
    # request: 请求对象 --> 获取请求方式、数据

    # 1. 判断请求方式
    if request.method == 'POST':

        # 2. 获取请求参数
        username = request.form.get('username')
        password = request.form.get('password')
        password2 = request.form.get('password2')

        # 3. 判断参数是否填写 & 密码是否相同
        if not all([username, password, password2]):
            # print '参数不完整'
            flash(u'参数不完整') # flash 消息闪现
        elif password != password2:
            # print '密码不一致'
            flash(u'密码不一致')

        # 4. 没有问题就返回'success'
        else:
            print password
            return 'success'
    return render_template('index.html')


if __name__ == '__main__':
    app.run(debug=True)

示例 - 使用 Flask-WTF 实现表单

模板页面

<form method="post">
    {# 设置 csrf_token#}
    { { form.csrf_token() } }
    { { form.username.label } }{ { form.username } }<br>
    { { form.password.label } }{ { form.password } }<br>
    { { form.password2.label } }{ { form.password2 } }<br>
</form>

视图函数

# -*- coding: utf-8 -*-
__author__ = 'QB'

from flask import Flask, render_template, request, flash

# 导入 wtf 扩展的表单类
from flask_wtf import FlaskForm

# 导入自定义表单需要的字段
from wtforms import SubmitField, StringField, PasswordField

# 导入 wtf 扩展高蹄的表单验证器
from wtforms.validators import DataRequired, EqualTo

# 解决编码问题
import sys
reload(sys)
sys.setdefaultencoding("utf-8")

app = Flask(__name__)
app.config['SECRE_KEY'] = 'qinbin'


# 自定义表单类,文本字段、密码字段、提交按钮
# 需要自定义一个表单类
class RegisterForm(FlaskForm):
    username = StringField('用户名:', validators=[DataRequired()])
    password = PasswordField('密码:', validators=[DataRequired()])
    password2 = PasswordField('确认密码:', validators=[DataRequired(), EqualTo('password', input=SubmitField('提交'))])


# 定义根路由视图函数,生成表单对象,获取表单数据,进行表单数据验证
@app.route('/form', methods=['GET', 'POST'])
def form():
    register_form = RegisterForm()

    if request.method == 'POST':
        # 调用 validate_on_submit 方法,可以一次性执行完所有验证函数的逻辑
        if register_form.validate_on_submit():
            # 进入这里就表示所有的逻辑都验证成功
            username = request.form.get('username')
            password = request.form.get('password')
            password2 = request.form.get('password2')
            print username
            return 'success'

        else:
            # message = register_form.errors.get('password2')[0]
            # flash(message)
            flash('参数有误')
    return render_template('wtf.html', form=register_form)

Search

    Table of Contents