Flask WTForms 表单插件的使用

在Web应用中，表单处理是一个基本而常见的任务。Python的WTForms库通过提供表单的结构、验证和渲染等功能，简化了表单的处理流程。与此同时，Flask的扩展Flask-WTF更进一步地整合了WTForms，为开发者提供了更便捷、灵活的表单处理方式。Flask-WTF是建立在WTForms之上的Flask扩展，旨在简化Web应用中表单处理的流程。它提供了与Flask框架的无缝集成，使得表单的创建、验证和渲染变得非常容易。通过Flask-WTF，开发者能够轻松地构建具有强大功能和良好用户体验的表单页面。

主要特点：

  1. 结合WTForms功能： Flask-WTF基于WTForms库，继承了WTForms的强大功能，包括表单字段、验证器等，为开发者提供了一套完备的表单处理工具。
  2. Flask集成： 与Flask框架无缝集成，通过简单的导入和初始化，即可在Flask应用中使用Flask-WTF提供的表单处理功能。
  3. CSRF保护： Flask-WTF内置了CSRF（Cross-Site Request Forgery）保护机制，帮助开发者防范Web应用中的CSRF攻击。
  4. 表单渲染： 提供了方便的表单渲染方法，使得表单的呈现过程更为简单，开发者可以轻松定制表单的外观。
  5. 文件上传支持： 支持文件上传功能，使得开发者能够方便地处理包含文件上传功能的表单。

通过Flask-WTF，开发者能够以更高效的方式处理Web应用中的表单，减少重复性工作，提升开发效率。

简单验证表单

前台定义渲染模板，后端对模板渲染，并根据validators验证器中的规则对输入内容进行匹配。

<form method="post">{{ form.csrf_token }}<!--可自定义增加颜色--><p>{{ form.username.label(style="color:red;") }} : {{form.username}}</p><p>{{ form.password.label }} : {{form.password}}</p><p>{{ form.repeat_password.label }} : {{form.repeat_password}}</p>{% for msg in form.repeat_password.errors %}<p>提示: {{msg}}</p>{% endfor %}{{form.submit}}
</form>

后台定义MyFlaskForm(FlaskForm)类用于对登录表单进行动态渲染。

from flask import Flask, render_template, request
from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField
from wtforms.validators import DataRequired, EqualTo,Length,Regexpapp = Flask(__name__)app.config["SECRET_KEY"] = "d3d3Lmx5c2hhcmsuY29t"# 定义表单模型类
class MyFlaskForm(FlaskForm):# DataRequired 验证不为空,Length 限制长度, Regexp限制不允许出现弱口令username = StringField(label=u"登录账号", validators=[DataRequired(), Length(min=6, max=18)])password = PasswordField(label=u"登录密码", validators=[DataRequired(), Length(min=6, max=18)])repeat_password = PasswordField(label=u"确认密码", validators=[DataRequired(),EqualTo("password", u"两次密码不一致")])submit = SubmitField(label=u"提交")@app.route("/", methods=["GET", "POST"])
def index():form = MyFlaskForm()if request.method == "POST":if form.validate_on_submit():username = form.username.datapassword = form.password.datarepeat_password = form.repeat_password.dataprint("用户名: {} --> 密码: {}".format(username,repeat_password))return render_template("index.html", form=form)return render_template("index.html", form=form)if __name__ == '__main__':app.run(debug=True)

运行后默认构造一个账号密码登录窗口的表单，用户可以填写表单并返回给后台信息，如下图所示；

表单附加参数

所谓附加参数就是指，渲染器返回页面是主动对某个组件增加一些CSS属性，这些属性起到装饰作用，通常会使用render_kw属性返回CSS。

{% for msg in get_flashed_messages() %}<p>闪现消息: {{ msg }}</p>
{% endfor %}<form method="POST" id="form-data">{{ form.csrf_token }}{{ form.username.label }} : {{ form.username }}{{ form.password.label }} : {{ form.password }}{{ form.submit.label }} {{ form.submit }}
</form>

后台定义MyFlaskForm(FlaskForm)类用于对登录表单进行动态渲染。

from flask import Flask, render_template, request,flash
from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField
from wtforms.validators import DataRequired, EqualTo,Length,Regexpapp = Flask(__name__)app.config["SECRET_KEY"] = "d3d3Lmx5c2hhcmsuY29t"# 定义表单模型类
class MyFlaskForm(FlaskForm):username = StringField(# 标签label="账号",# 验证器validators=[DataRequired('请输入用户名')],description="账号",# 增加附加参数render_kw={"class":"form-control","placeholder":"请输入用户名","required":'required'})password = PasswordField(label="密码",validators=[DataRequired('请输入登录密码')],description="密码",render_kw={"class": "form-control","placeholder": "请输入登录密码","required": 'required'})submit = SubmitField(label="登录",render_kw={"class": "btn",})@app.route("/", methods=["GET", "POST"])
def index():form = MyFlaskForm()if request.method == "POST":if form.validate_on_submit():username = form.username.datapassword = form.password.dataprint("用户名: {} 密码: {}".format(username, password))if username == "lyshark" and password == "123123":flash("密码正确")else:flash("密码错误")return render_template("index.html", form=form)if __name__ == '__main__':app.run(debug=True)

运行上述代码，当用户输入密码错误后会出现闪现消息，如下图所示；

地址验证表单

Flask框架中特殊表单的验证有很多，常用的表单验证也就以下这几种。

<form method="post">{{ form.csrf_token }}<p>{{ form.url.label }} : {{form.url}}</p><p>{{ form.address_v4.label }} : {{form.address_v4}}</p><p>{{ form.address_v6.label }} : {{form.address_v6}}</p><p>{{ form.mac.label }} : {{form.mac}}</p>{{form.submit}}
</form>

后台定义MyFlaskForm(FlaskForm)类用于对登录表单进行动态渲染。

from flask import Flask, render_template, request
from flask_wtf import FlaskFormfrom wtforms import (BooleanField, DecimalField, DateField, DateTimeField, FieldList,FloatField, FormField, IntegerField, RadioField, SelectField,SelectMultipleField, StringField,SubmitField,PasswordField)from wtforms.validators import (DataRequired, data_required, Email, email, EqualTo, equal_to,IPAddress, ip_address, InputRequired, input_required, Length,length, NumberRange, number_range, Optional, optional,Regexp, regexp, URL, url, AnyOf,any_of, NoneOf, none_of, MacAddress, mac_address, UUID)app = Flask(__name__)app.config["SECRET_KEY"] = "d3d3Lmx5c2hhcmsuY29t"# 定义表单模型类
class MyFlaskForm(FlaskForm):url = StringField(label=u"验证网址", validators=[DataRequired(), Length(min=6, max=30),URL()])address_v4 = StringField(label=u"验证IPv4", validators=[DataRequired(), Length(max=30), IPAddress()])address_v6 = StringField(label=u"验证IPv6", validators=[DataRequired(), Length(max=30), IPAddress(ipv6=True)])mac = StringField(label=u"验证MAC地址",validators=[DataRequired(), Length(max=60), MacAddress()])submit = SubmitField(label=u"提交")@app.route("/", methods=["GET", "POST"])
def index():form = MyFlaskForm()if request.method == "POST":if form.validate_on_submit():url = form.url.dataaddress_v4 = form.address_v4.dataaddress_v6 = form.address_v6.datamac = form.mac.dataprint("网址: {} 地址v4: {} 地址v6: {} MAC地址: {}".format(url,address_v4,address_v6,mac))return render_template("index.html", form=form)return render_template("index.html", form=form)if __name__ == '__main__':app.run(debug=True)

网络IP地址的验证也有相应的表单，如下表单分别可以实现对不同地址的验证；

特殊表单验证

WTF表单除去常规表单验证以外，还可以验证其他特殊表单，例如验证邮箱，浮点数，日期时间等。

<form method="post">{{ form.csrf_token }}<!--邮箱--><p>{{ form.email.label }} --> {{ form.email }}</p>{% for msg in form.email.errors %}<p>错误提示: {{msg}}</p>{% endfor %}<!--年龄--><p>{{ form.age.label }} --> {{ form.age }}</p>{% for msg in form.age.errors %}<p>错误提示: {{msg}}</p>{% endfor %}<!--小数--><p>{{ form.height.label }} --> {{ form.height }}</p>{% for msg in form.height.errors %}<p>错误提示: {{msg}}</p>{% endfor %}<!--浮点数--><p>{{ form.float_.label }} --> {{ form.float_ }}</p>{% for msg in form.float_.errors %}<p>错误提示: {{msg}}</p>{% endfor %}<!--段落--><p>{{ form.description.label }} --> {{ form.description }}</p>{% for msg in form.description.errors %}<p>错误提示: {{msg}}</p>{% endfor %}<!--日期--><p>{{ form.local_date.label }} --> {{ form.local_date }}</p>{% for msg in form.local_date.errors %}<p>错误提示: {{msg}}</p>{% endfor %}<!--时间--><p>{{ form.time_date.label }} --> {{ form.time_date }}</p>{% for msg in form.time_date.errors %}<p>错误提示: {{msg}}</p>{% endfor %}<!--日期时间--><p>{{ form.datetime_date.label }} --> {{ form.datetime_date }}</p>{% for msg in form.datetime_date.errors %}<p>错误提示: {{msg}}</p>{% endfor %}{{form.submit}}
</form>

后台定义MyFlaskForm(FlaskForm)类用于对登录表单进行动态渲染。

from flask import Flask, render_template, request
from flask_wtf import FlaskForm
from wtforms.validators import DataRequired,Regexp,DataRequired, Length, Email, EqualTo, NumberRange
from wtforms.fields import (StringField, PasswordField, DateField, BooleanField,DateTimeField,TimeField,SelectField, SelectMultipleField, TextAreaField,FloatField,HiddenField,RadioField, IntegerField, DecimalField, SubmitField,IntegerRangeField)app = Flask(__name__)app.config["SECRET_KEY"] = "d3d3Lmx5c2hhcmsuY29t"# 定义表单模型类
class MyFlaskForm(FlaskForm):# 安装 pip install email-validatoremail = StringField(label=u"邮箱地址", validators=[Email(message=u"邮箱格式错误"),Length(max=32)])# 整数类型输入,必须输入整型数值，范围在16到70之间age = IntegerField(label=u"年龄", validators=[NumberRange(min=16, max=70)])# 小数类型输入,必须输入数字数值，显示时保留两位小数height = DecimalField(label=u"小数输入", places=2)# 浮点数类型输入,必须输入浮点数值float_ = FloatField(label=u"浮点数输入")# Text Area类型 段落输入框description = TextAreaField(label=u"段落输入")# 日期类型输入,必须输入是 "年-月-日" 格式的日期local_date = DateField(label=u"日期", format='%Y-%m-%d')# 时间类型输入,必须输入是 "时:分:秒" 格式time_date = TimeField(label=u"时间", format='%H:%M')# 日期时间类型,必须输入是 "年-月-日 时:分:秒" 格式datetime_date = DateTimeField(label=u"日期时间", format='%Y-%m-%d %H:%M:%S')submit = SubmitField(label=u"提交")@app.route("/", methods=["GET", "POST"])
def index():form = MyFlaskForm()if request.method == "POST":if form.validate_on_submit():email = form.email.dataage = form.age.dataheight = form.height.datafloat_ = form.float_.datadescription = form.description.dataprint("邮箱: {} 年龄: {} 小数点: {} 浮点数: {} 段落输入: {}".format(email,age,height,float_,description))local_date = form.local_date.datatime_date = form.time_date.datadatetime_date = form.datetime_date.dataprint("日期: {} 时间: {} 日期时间: {}".format(local_date,time_date,datetime_date))return render_template("index.html", form=form)return render_template("index.html", form=form)if __name__ == '__main__':app.run(debug=True)

特殊表单的构建，这里的表单包括了如下图所示的字段可以使用；

复选多选表单

复选框多选框与下拉选择框三种表单的验证方式总结。

<form method="post">{{ form.csrf_token }}<!--单选框过滤器--><p>{{ form.gender.label }} {{ form.gender }}</p>{% for msg in form.gender.errors %}<p>错误提示: {{msg}}</p>{% endfor %}<!--下拉框过滤器--><p>{{ form.jobs.label }} {{ form.jobs }}</p>{% for msg in form.jobs.errors %}<p>错误提示: {{msg}}</p>{% endfor %}<!--多选框过滤器--><p>{{ form.hobby.label }} {{ form.hobby }}</p>{% for msg in form.hobby.errors %}<p>错误提示: {{msg}}</p>{% endfor %}<!--单选框过滤器--><p>{{ form.accept.label }} {{ form.accept }}</p>{% for msg in form.accept.errors %}<p>错误提示: {{msg}}</p>{% endfor %}<!--复选框过滤器--><p>{{ form.favor.label }} {{ form.favor }}</p>{% for msg in form.favor.errors %}<p>错误提示: {{msg}}</p>{% endfor %}{{form.submit}}
</form>

后台定义MyFlaskForm(FlaskForm)类用于对登录表单进行动态渲染。

from flask import Flask, render_template, request
from flask_wtf import FlaskForm
from wtforms import Form,widgets,validators
from wtforms.fields import simple,core
from wtforms.validators import DataRequired,Regexp,DataRequired, Length, Email, EqualTo, NumberRange
from wtforms.fields import (StringField, PasswordField, DateField, BooleanField,DateTimeField,TimeField,SelectField, SelectMultipleField, TextAreaField,FloatField,HiddenField,RadioField, IntegerField, DecimalField, SubmitField,IntegerRangeField)from wtforms.fields import simple,coreapp = Flask(__name__)app.config["SECRET_KEY"] = "d3d3Lmx5c2hhcmsuY29t"# 定义表单模型类
class MyFlaskForm(FlaskForm):# RadioBox单选框，choices里的内容会在ul标签里，里面每个项是(值，显示名)对gender = RadioField(label=u"性别", choices=[('man', '男'), ('wo', '女')], validators=[DataRequired()])# Select下拉单选框，choices里的内容会在Option里，里面每个项是(值，显示名)对jobs = SelectField(label=u"工作", choices=[("teacher","老师"),("doctor","医生"),("engineer","工程师")])# Select多选框，choices里的内容会在Option里，里面每个项是(值，显示名)对hobby = SelectMultipleField(label=u"兴趣", choices=[('swim', '渗透'),('skate', '运维'),('hike', '科学')])# Checkbox单选框 加上default='checked' 即默认是选上的accept = BooleanField(label=u"单选框", default='checked', validators=[DataRequired()])# Select复选框, 多选框合并选择，复选框favor = SelectMultipleField(label="特长",choices=((1, 'Python'), (2, '渗透'), (3, "运维"), (4, "科学")),coerce=int, default=[1, 2, 4],option_widget=widgets.CheckboxInput(),widget=widgets.ListWidget(prefix_label=False))submit = SubmitField(label=u"提交")@app.route("/", methods=["GET", "POST"])
def index():form = MyFlaskForm()if request.method == "POST":if form.validate_on_submit():gender = form.gender.datajobs = form.jobs.datahobby = form.hobby.dataaccept = form.accept.datafavor = form.favor.dataprint("性别: {} 工作: {} 兴趣: {} 是否接受: {} 复选框: {}".format(gender,jobs,hobby,accept,favor))return render_template("index.html", form=form)return render_template("index.html", form=form)if __name__ == '__main__':app.run(debug=True)

选择菜单包括了单选与多选，如下图所示的表单均可以构建；

文件上传表单

文件上传Flask也提供了默认表单可以使用，如下提供的FileField即可完成上传工作。

<form method="POST" action="" enctype="multipart/form-data">{{ form.hidden_tag() }}{{ form.attach.label }} {{ form.attach }}<input type="submit" value="Submit">
</form>

后台定义MyFlaskForm(FlaskForm)类用于对登录表单进行动态渲染。

from flask import Flask, render_template, request
from flask_wtf import FlaskForm
from werkzeug.utils import secure_filename
from flask_wtf.file import FileField, FileAllowed, FileRequiredapp = Flask(__name__)app.config["SECRET_KEY"] = "d3d3Lmx5c2hhcmsuY29t"# 定义表单模型类
class MyFlaskForm(FlaskForm):attach = FileField(label="上传文件",validators=[FileRequired(),FileAllowed(["jpg","png"],"只可上传图片")])@app.route("/", methods=["GET", "POST"])
def index():form = MyFlaskForm()if request.method == "POST":if form.validate_on_submit():filename = secure_filename(form.attach.data.filename)form.attach.data.save('/' + filename)return 'Upload successfully!'return render_template("index.html", form=form)return render_template("index.html", form=form)if __name__ == '__main__':app.run(debug=True)

上传表单时需要注意，启动的进程必须具备管理员权限或者是读写权限，否则则会提示权限拒绝；

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/221335.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Java PriorityQueue

Java PriorityQueue

一般情况下, 我们使用队列是为了能够建造队列的先进先出 (First-In-First-Out) 模式的, 达到一种资源的公平分配, 先到达的任务 (元素) 先处理, 但有时需要在队列中基于优先级处理对象。 存入队列中的任务 (元素) 具有优先级, 需要根据优先级修复里面的数据。而在 JDK 1.5 引入…
阅读更多...
最火web大屏可视化编辑器

最火web大屏可视化编辑器

前言&#xff1a; 乐吾乐Le5le大屏可视化设计器&#xff0c;零代码实现物联网、工业智能制造等领域的可视化大屏、触摸屏端UI以及工控可视化的解决方案。同时也是一个Web组态工具&#xff0c;支持2D、3D等多种形式&#xff0c;用于构建具有实时数据展示、监控预警、丰富交互的组…
阅读更多...
创建可以离线打包开发的uniapp H5项目

创建可以离线打包开发的uniapp H5项目

安装node环境 略 安装vue脚手架&#xff0c;在线 npm install -g vue/cli PS&#xff1a;vue-cli已进入维护模式&#xff0c;vue3最新脚手架使用npm init vuelatest安装&#xff0c;安装后使用create-vue替换vue指令&#xff0c;create-vue底层使用vite提升前端开发效率&…
阅读更多...
基于UI交互意图理解的异常检测方法

基于UI交互意图理解的异常检测方法

美团到店平台技术部/质量工程部与复旦大学周扬帆教授团队开展了科研合作&#xff0c;基于业务实际场景&#xff0c;自主研发了多模态UI交互意图识别模型以及配套的UI交互框架。 本文从大前端质量保障领域的痛点出发&#xff0c;介绍了UI交互意图识别的方法设计与实现。基于UI交…
阅读更多...
3.数据结构

3.数据结构

3.1 数据结构分类 常见的数据结构包括数组、链表、栈、队列、哈希表、树、堆、图&#xff0c;它们可以从“逻辑结构”和“物理结构”两个维度进行分类。 3.1.1逻辑结构&#xff1a;线性与非线性 逻辑结构揭示了数据元素之间的逻辑关系。在数组和链表中&#xff0c;数据按照…
阅读更多...
85基于Matlab的交通设施识别

85基于Matlab的交通设施识别

基于Matlab的交通设施识别。 GUI设计图像处理, 基于数字图像处理&#xff0c;设计实现一个自然场景下公路交通限速标志分割和识别的程序。要求系统具有界面&#xff0c;并实现以下功能&#xff1a; 1&#xff09;读入自然场景下包含交通标志的图像&#xff1b; 2&#xff09;对…
阅读更多...
C#，数值计算——插值和外推，RBF_fn 与 RBF_gauss 的计算方法与源程序

C#，数值计算——插值和外推，RBF_fn 与 RBF_gauss 的计算方法与源程序

1 文本格式 using System; namespace Legalsoft.Truffer { public interface RBF_fn { double rbf(double r); } } ---------------------------------------------- using System; namespace Legalsoft.Truffer { public class RBF_gauss : RBF…
阅读更多...
基于OGG实现MySQL实时同步

基于OGG实现MySQL实时同步

&#x1f4e2;&#x1f4e2;&#x1f4e2;&#x1f4e3;&#x1f4e3;&#x1f4e3; 哈喽&#xff01;大家好&#xff0c;我是【IT邦德】&#xff0c;江湖人称jeames007&#xff0c;10余年DBA及大数据工作经验 一位上进心十足的【大数据领域博主】&#xff01;&#x1f61c;&am…
阅读更多...
什么是好的FPGA编码风格？（3）--尽量不要使用锁存器Latch

什么是好的FPGA编码风格？（3）--尽量不要使用锁存器Latch

前言 在FPGA设计中&#xff0c;几乎没人会主动使用锁存器Latch&#xff0c;但有时候不知不觉中你的设计莫名其妙地就生成了一堆Latch&#xff0c;而这些Latch可能会给你带来巨大的麻烦。 什么是锁存器Latch&#xff1f; Latch&#xff0c;锁存器&#xff0c;一种可以存储电路…
阅读更多...
我的创作纪念日-五周年

我的创作纪念日-五周年

机缘 5年前&#xff0c;作为一名技术人员&#xff0c;平时利用CSDN作为学习平台工具&#xff0c;帮助解决工作中遇到的问题。随着30、35中年危机渐行渐近&#xff0c;回过头来发现平时虽然也有记录整理学习笔记的习惯&#xff0c;但还没有一个可以持续鞭笞自己和记录自己学习的…
阅读更多...
springboot函数式web

springboot函数式web

1.通常是路由(请求路径)业务 2.函数式web&#xff1a;路由和业务分离 一个configure类 配置bean 路由等 实现业务逻辑 这样实现了业务和路由的分离
阅读更多...
02、Tensorflow实现手写数字识别（数字0-9）

02、Tensorflow实现手写数字识别（数字0-9）

02、Tensorflow实现手写数字识别&#xff08;数字0-9&#xff09; 开始学习机器学习啦&#xff0c;已经把吴恩达的课全部刷完了&#xff0c;现在开始熟悉一下复现代码。对这个手写数字实部比较感兴趣&#xff0c;作为入门的素材非常合适。 基于Tensorflow 2.10.0与pycharm 1…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023