Flask WTForms 表单插件的使用
在Web应用中，表单处理是一个基本而常见的任务。Python的WTForms库通过提供表单的结构、验证和渲染等功能，简化了表单的处理流程。与此同时，Flask的扩展Flask-WTF更进一步地整合了WTForms，为开发者提供了更便捷、灵活的表单处理方式。Flask-WTF是建立在WTForms之上的Flask扩展，旨在简化Web应用中表单处理的流程。它提供了与Flask框架的无缝集成，使得表单的创建、验证和渲染变得非常容易。通过Flask-WTF，开发者能够轻松地构建具有强大功能和良好用户体验的表单页面。
主要特点：
- 结合WTForms功能： Flask-WTF基于WTForms库，继承了WTForms的强大功能，包括表单字段、验证器等，为开发者提供了一套完备的表单处理工具。
- Flask集成： 与Flask框架无缝集成，通过简单的导入和初始化，即可在Flask应用中使用Flask-WTF提供的表单处理功能。
- CSRF保护： Flask-WTF内置了CSRF（Cross-Site Request Forgery）保护机制，帮助开发者防范Web应用中的CSRF攻击。
- 表单渲染： 提供了方便的表单渲染方法，使得表单的呈现过程更为简单，开发者可以轻松定制表单的外观。
- 文件上传支持： 支持文件上传功能，使得开发者能够方便地处理包含文件上传功能的表单。
通过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,Regexp
app = 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.data
password = form.password.data
repeat_password = form.repeat_password.data
print("用户名: {} --> 密码: {}".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,Regexp
app = 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.data
password = form.password.data
print("用户名: {} 密码: {}".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 FlaskForm
from 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.data
address_v4 = form.address_v4.data
address_v6 = form.address_v6.data
mac = form.mac.data
print("网址: {} 地址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-validator
email = 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.data
age = form.age.data
height = form.height.data
float_ = form.float_.data
description = form.description.data
print("邮箱: {} 年龄: {} 小数点: {} 浮点数: {} 段落输入: {}".format(email,age,height,float_,description))
local_date = form.local_date.data
time_date = form.time_date.data
datetime_date = form.datetime_date.data
print("日期: {} 时间: {} 日期时间: {}".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,core
app = 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.data
jobs = form.jobs.data
hobby = form.hobby.data
accept = form.accept.data
favor = form.favor.data
print("性别: {} 工作: {} 兴趣: {} 是否接受: {} 复选框: {}".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, FileRequired
app = 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)
上传表单时需要注意，启动的进程必须具备管理员权限或者是读写权限，否则则会提示权限拒绝；
Flask WTForms 表单插件的使用的更多相关文章
- Flask wtforms 表单验证使用
目录 wtforms 使用1(简单版): 使用2(复杂版): wtforms 安装:pip3 install wtforms 使用1(简单版): from flask import Flask, re ...
- flask框架（八）—自定义命令flask-script、多app应用、wtforms表单验证、SQLAIchemy
自定义命令flask-script 用于实现类似于django中 python3 manage.py runserver ...类似的命令,用命令行启动项目 首先安装:pip3 install fla ...
- Flask基础(16)-->WTForms表单创建和简单验证
Flask基础(16)-->WTForms表单创建和简单验证 前言:使用Flask_WTF需要配置参数SECRET_KEYCSRF_ENABLED是为了CSRF(跨站请求伪造)保护.SECRET ...
- 五十二：WTForms表单验证之基本使用
作用:1.做表单验证,把用户提交的数据验证是否合法2.做模板渲染 安装:pip install wtforms 表单验证1.自定义一个表单类,继承wtforms.Form2.定义好需要验证的字段,字段 ...
- 测开之路一百四十八：WTForms表单验证
使用WTForms表单验证,可以在数据建模时就设置验证信息和错误提示 创建模型时,设置验证内容,如必填.格式.长度 from flask_wtf import Formfrom wtforms imp ...
- （转）jQuery插件 -- Form表单插件jquery.form.js
beforeSubmit: validate function validate(formData, jqForm, options) { //在这里对表单进行验证,如果不符合规则,将返回false来 ...
- jquery.form.js表单插件的使用
jquery.form.js官网:http://malsup.com/jquery/form API文档:http://malsup.com/jquery/form/#api 下载地址:http:// ...
- easyui表单插件-包括日期时控件-列表
← jQuery EasyUI 表单插件 – Numberspinner 数值微调器 jQuery EasyUI 表单插件 - Timespinner 时间微调器 jQuery EasyUI 插件 ...
- 表单插件——form
表单插件——form 通过表单form插件,调用ajaxForm()方法,实现ajax方式向服务器提交表单数据,并通过方法中的options对象获取服务器返回数据,调用格式如下: $(form). a ...
- 如何利用WordPress创建自定义注册表单插件
来源:http://www.ido321.com/1031.html 原文:Creating a Custom WordPress Registration Form Plugin 译文:创建一个定制 ...
随机推荐
- 干掉 LaTeX ！用BookDown写本书
Bookdown是著名R包作者谢益辉开发的,支持采用Rmarkdown (R代码可以运行)或普通markdown编写文档,然后编译成HTML, WORD, PDF, Epub等格式. bookdown ...
- MP4 视频“只闻其声，不见其人”，是怎么回事呢？
艾瑞巴蒂大家好,我二狗子又来啦!这段时间关于疫情的好消息不断,各个地区的疫情都得到了有效的控制,做到了新增病例个位数增长甚至连续多天零增长!这不,二狗子也终于可以出村回到大城市上班啦!由于要坐很久的火 ...
- L1-046 整除光棍 (20分)
问题描述 这里所谓的"光棍",并不是指单身汪啦~ 说的是全部由1组成的数字,比如1.11.111.1111等.传说任何一个光棍都能被一个不以5结尾的奇数整除.比如,111111就可 ...
- Codeforces Round #707 (Div. 2, based on Moscow Open Olympiad in Informatics Editorial
Codeforces Round #707 (Div. 2, based on Moscow Open Olympiad in Informatics) Problem 1501A. Alexey a ...
- RSAC创新沙盒十强出炉，这家SCA公司火了
引言 近日,全球网络安全行业创新风向标RSAC创新沙盒公布了本年度入围十强的名单,软件供应链安全企业Endor Labs凭借基于依赖关系建立应用开发生命周期的解决方案获得了广泛关注. Endor La ...
- <vue 基础知识 2、插值语法> v-once,v-html,v-text,v-pre,v-cloak
代码结构 一. Mustache 1.效果 展示如何将数据展示在页面上 2.代码 01-Mustache.html <!DOCTYPE html> <html lang=&q ...
- 第65篇 AJAX初识 校验用户名 登录示例 文件上传 csrftoken
1, 知识储备 2. AJAX的定义 异步的JavaScript和XML 使用场景: JavaScript和后端的数据传递 2.1原生的JavaScript实现AJAX 2.2 JQuery实现 2. ...
- spring--Bean的作用域及应用场景
这六种Spring Bean的作用域适用于不同的应用场景: Singleton: 在Spring IoC容器中仅存在一个Bean实例,Bean以单例方式存在.无论我们是否在配置文件中显式定义,所有的S ...
- 浏览器兼容 ： IE10
<script> /*@cc_on @*//*@ if (document.documentMode == 10) { // 只在 IE10 文档模式下运行,例如 IE10 浏览器或 IE ...
- Linux-搜索-文件-find-locate-内容过滤-grep