Flask使用Flask-WTF表单

Flask-WTF

Flask-WTF是Flask框架的表单验证模块,Flask-WTF将表单数据解析、CSRF保护、文件上传等功能与Flask集成。

安装

Flask-WTF及其依赖可使用pip安装

pip install flask-wtf

安装成功如下:
在这里插入图片描述

跨站请求伪造保护

默认请求下,Flask-WTF能保护所有表单免受跨站请求伪造(CSRF)的攻击。为了实现CSRF保护,Flask-WTF需要程序设置一个密钥。Flask-WTF使用这个密钥生成加密令牌,再用令牌验证请求中表单数据的真伪。设置密钥的语句如下:

# secret_key内容可以自行定义,可以随便写一个值
app.secret_key = "secret from"

创建表单类

使用Flask-WTF时,每个Web表单都由一个继承自Form的类表示。这个类定义表单中的一组字段,每个字段都用对象表示。字段对象可附属一个或多个验证函数。验证函数用来验证用户提交的输入值是否符合要求。
如下创建一个简单的Web表单。

from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField
from wtforms import validators

# 定义一个表单类
class LoginForm(FlaskForm):
    # 定义一个文本框,提示信息为用户名,validators设置验证规则,参数是一个列表,可以添加多个验证函数,DataRequired不能为空验证函数
    username = StringField("用户名:", validators=[validators.DataRequired()])
    # 定义一个密码框
    password = PasswordField("密码:", validators=[validators.DataRequired()])
    # 定义一个提交按钮
    submit = SubmitField("提交")

定义了一个登录的form表单,其中有输入用户名和密码的文本框和一个表单提交按钮。除了上面定义的字段和验证规则外,还有一些常用的字段和验证规则,如下表。

WTForms支持的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无输入值时跳过其他验证函数
DataRequired确保字段中有数据
Regexp使用正则表达式验证输入值
URL验证URL
AnyOf确保输入值在可选值列表中
NoneOf确保输入值不值可选值列表中

定义视图函数

定义一个视图函数,请求方式设置为GET和POST请求,请求跳转到表单页面,POST请求为表单提交请求,如果是PSOT请求,则输出接收到表单传递过来的内容。代码如下:

@app.route('/login', methods=['GET', 'POST'])
def login():
    form = LoginForm()
    if request.method == 'POST':
        # 获取form表单提交过来的值
        username = form.username.data
        pwd = form.password.data
        print(username, pwd, sep='====')
    return render_template("login.html", form=form)

把表单类当做参数传递到表单页面。

渲染表单

把表单渲染为HTML文件,代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form method="post">
    {# label为表单类中定义此属性函数的第一个参数,如果需要添加样式,可以为字段指定id或class属性 #}
    {{ form.username.label }}{{ form.username(id = 'username') }}<br>
    {{ form.password.label }}{{ form.password }}<br>
    {{ form.submit }}
</form>
</body>
</html>

渲染后页面效果如下:
在这里插入图片描述
点击提交后,控制台输出视图函数中接收到表单提交的数据。
在这里插入图片描述

参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:技术黑板 设计师:CSDN官方博客 返回首页

打赏作者

小马 同学

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值