bootstrap的表单验证 vue_第45天:Web表单

c09d916ba5f1ac5ea30f899934a43d8f.png

在了解了 Flask Bootstrap 基本框架之后,我们来了解一下 Flask 框架的 表单( form ),以帮助我们创建交互式的 Web 应用,最后会有个提交个人信息的例子。

Flask-WTF 是 Flask 框架的一个扩展,用来做表单的交互,是对 WTForms 的集成,默认支持 CSRF 安全签名,并且继承文件上传功能。

安装

使用 pip 安装

pip install Flask-WTF

验证

>>> from flask_wtf import FlaskForm>>>

小试牛刀

创建表单类

Flask-WTF 能将 WTForms 集成到 Flask 应用中,创建一个 app.py 主代码文件,例如:

from flask_wtf import FlaskFormfrom wtforms import StringFieldfrom wtforms.validators import DataRequiredclass MyForm(FlaskForm):    name = StringField('name', validators=[DataRequired()])

MyForm 是自定义的类,继承自 FlaskForm,其中定义了一个字段 name,标题是 name, 且设置为非空。

表单模板

接下来创建一个表单模板 submit.html,例如:

    {{ form.csrf_token }}    {{ form.name.label }} {{ form.name(size=20) }}    

其中 form.csrf_token 是 Flask-WTF 提供的一个防止跨站请求伪造的隐藏字段。原理是将一个密钥根据请求特征加密,在表单提交时一起送到服务器端,作校验。

密钥串与多种定义方式,为了方便,这里将密钥串定义在应用上:

app.secret_key = 'abc'

注意:上示例仅作演示说明,不能在生产系统中用这样简单的密钥

之后则是对字段 name 的模板定义,经过渲染会替换成 Html 控件。

定义视图函数

视图函数首先需要将表单渲染出来,另外要对表单的提交作验证,当然视图函数与提交验证函数也可不是同一个:

@app.route('/', methods=('GET', 'POST'))def submit():    form = MyForm()    if form.validate_on_submit():        return redirect('/success')    return render_template('submit.html', form=form)

提交表单一般都是 POST 方法,所以要确保视图函数支持 POST

视图函数中实例化一个 MyForm,值得注意的时,FlaskForm 示例化时会使用 request 中的 form 来初始化,所以在下面才可以直接来校验表单

validate_on_submit 方法是 is_submitted 和 validate 的联合校验,后面会详述

如果验证通过将跳转到 /success,如果没有通过,用 form 来渲染 submit.html 模板,

运行

在主代码  app.py 中加入启动方法:

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

然后运行,如果一起正常,访问 localhost:5000, 就能看输入框和提交按钮,点击提交,会跳转到 /success 或者提升必填。

表单

FlaskForm 是 WTForms Form 的子类,可以用来定一个表单,定义表单中的字段,验证方式等,作为一个 Flask 和 Html 之间的一个数据载体。

另外 FlaskForm 集成了 CSRF 校验,方便编写程序的同时,提高访问安全性。定义 Form 对象时不用明确声明 CSRF 字段,只需要在表单模板中填写  form.csrf_token 就行,提交表单时,视图函数会自动对 CSRF 进行校验。

FlaskForm 实例化参数中有个 formdata 参数,用来设定 Form 中字段的值,在视图函数中,可以不提供 formdata,会将 request.form 或者 request.files 中获取,作为 formdata 参数,这就是视图函数中实例化 Form 时,不带任何参数,在后面还能方法 Form 对象内容的原因。

字段及验证

FlaskForm 从 0.9.0 版本开始,不再从 WTForms 中导入任何东西,所以大部分字段和校验方法都直接引用自 WTForms,如:

from wtforms import StringField, IntergreField, validators
  • 常用的字段
字段说明
StringField文本字段
IntergreField文本字段,要求输入的时数字
PasswordField文本字段,输入内容会转会为小黑点
DateField文本字段,输入指定日期格式的字符串会转会为日期类型
RadioField单选字段
SelectField选择字段
SelectMultipleField多项选择字段
SubmitField表单的提交按钮
  • 常用验证
验证说明
DataRequired必填字段
Email电子邮箱地址验证
EqualTo验证与其他指定字段值是否相等
Length输入字符串长度限制
NumberRange输入数值大小限制
URL网站格式验证

例如定义一个 MyForm 表单类:

class MyForm(FlaskForm):    name = StringField(label='姓名', validators=[InputRequired()])    city = StringField('城市', validators=[validators.Length(min=4, max=25, message='输入的长度不符合要求')])    birthday = DateField(label='生日', format="%Y-%m-%d", validators=[DataRequired('日期格式不正确')])    gender = RadioField(label='性别', choices=[(1, 'male'), (2, 'female')])    interest = SelectMultipleField(label='兴趣', choices=[(1, 'Football'), (2, 'Movies'), (3, 'Reading')])

如果字段值验证失败,会将错误信息存放在字段的 errors 属性中,errors 是个列表,元素是每一个验证出现的问题信息,通过设定验证的 message 参数指定。

要完整的在模板中定义字段以及错误信息,是件乏味的事情,这里通过一个自定义的模板宏来完成:

{% macro render_field(field) %}  {{ field.label }}:  {{ field(**kwargs)|safe }}  {% if field.errors %}        {% for error in field.errors %}      {{ error }}    {% endfor %}      {% endif %}  {% endmacro %}

文件上传

上传文件,是表单应用必不可少的,可以通过 FileField 字段来设置,因为需要视图函数对上传的文件进行处理,所以这里单独作说明

定义一个有上传文件字段的表单类:

from flask_wtf.file import FileFieldclass PhotoForm(FlaskForm):  photo = FileField('上传照片')

视图函数定义为:

@app.route('/upload', methods=['GET', 'POST'])def upload():    form = PhotoForm()    filepath = None    if form.validate_on_submit():        filename = secure_filename(form.photo.data.filename)        file = form.photo.data        filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)        file.save( filepath )    else:        filename = None    return render_template('photo.html', form=form, filename= filename)

在通过验证之后,用方法 secure_filename 对上传文件名作安全处理,这是很有必要的,以防止通过文件名注入, 这个方法从库 werkzeug 中导入,这个库会在在安装 Flask 时一起被安装。

之后拿到上传文件的数据,这是已经经过 Flask 转化的 File 对象,可以直接调用 save 方法存储上传的文件。

app.config['UPLOAD_FOLDER'] 定义了文件存储的位置,如:

app.config['UPLOAD_FOLDER'] = './upload'

最后新建一个模板文件 upload.html:

    {{ form.csrf_token() }}    {{ form.photo() }}    

注意模板中 form 的编码类型必须设置为 multipart/form-data

Bootstrap

虽然 FlaskForm 使用起来已经很方便了,但是还是有很多需要重复编写的地方,以及展示效果不够美观的问题,借助 Bootstrap-flask 将解决这些问题。

之前对 Bootstrap-flask 介绍中说国,Bootstrap-flask 主要是定义了很多模板宏,减少重复的编码,对于表单,同样提供了很多宏

首先在模板中导入 bootstrap 的 Form 相关宏:

{% from 'bootstrap/form.html' import render_form, render_form_row, render_field %}
  • render_form 接受一个 Form 对象,将其渲染成 Html 表单,是最省事的,例如:
{{ render_form(form) }}
  • render_field 接受一个 Field, 将其渲染成一个表单的字段:
{{ render_field(form.name) }}
  • render_form_row 接受一个 Field 列表,将列表中的字段渲染到一行

模板代码如下:

{% from 'bootstrap/form.html' import render_form, render_form_row, render_field %}{{ bootstrap.load_css() }}

render_form

{{ render_form(form) }}

render_form_row

{{ render_form_row([form.name, form.city]) }} {{ render_form_row([form.gender, form.birthday]) }} {{ render_form_row([form.interest]) }}

render_field

{{ render_field(form.name) }} {{ render_field(form.gender) }} {{ render_field(form.interest) }}

先导入表单相关的宏,然后加入 Bootstrap 的样式,之后是各个宏的使用

总结

本节课程简单介绍了 Flask 中表单的处理方式和方法,包括 FlaskForm,WTForms和一些常用的字段,最后说明了 Bootstrap-flask 对表单的支持,以便是 Web 开发更高效。

示例代码:Python-100-days-day045

参考

  • https://flask-wtf.readthedocs.io/en/stable/
  • https://dormousehole.readthedocs.io/en/latest/patterns/wtforms.html
  • https://www.cnblogs.com/haiyan123/p/8254228.html

系列文章

    第44天:Flask 框架集成Bootstrap

    第43天:Python filecmp&difflib模块

    第42天:Python paramiko 模块

    第41天:Python operator 模块

    第0-40天:从0学习Python 0-40合集PS:公号内回复 :Python,即可进入Python 新手学习交流群,一起100天计划!-END-Python 技术关于 Python 都在这里46f1f0137fcb266bda4681b8bc2e8849.png

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

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

相关文章

超火GitHub项目!一夜获得5000星,竟是微软开源的计算器

全世界只有3.14 % 的人关注了数据与算法之美昨天,微软在 MIT License 下开源了一个 GitHub 项目——Windows 计算器,短短 24 小时内就获得了接近 5000 颗星,并引发大量讨论。这个项目爆红的速度可能连微软自己都始料未及。科技媒体 The Verge…

面向.NET开发人员的Dapr——目录

今天上午的主题就是Dapr,别错过了哦。本系列部分翻译自 .NET团队编写的Dapr for .NET Developers | Microsoft Docs(https://docs.microsoft.com/en-us/dotnet/architecture/dapr-for-net-developers/),大部内容复制于面向 .NET 开发人员的 Dapr | Micro…

人体工学腰垫,保腰神器,改善久坐腰酸背痛

▲数据汪特别推荐点击上图进入玩酷屋之前小木推荐“德国MINICUTE人体工学腰垫”受到了大家一致的好评和争相购买。小木为什么推荐这一款原因是:据统计,我国腰椎病患者已经突破2亿人。30~40岁人群中,患有颈腰椎病的占比59.1%!而且有…

和flag_不怕立Flag,就怕没有Flag

转眼间就已经是今年的最后一天了,回想去年给自己立下的flag,看着自己手机上的减肥计划和体测成绩上的超重,我陷入了沉思,到底是哪个环节出问题了呢?我慢悠悠地在宿舍里转圈,看见舍友递过来的薯片&#xff0…

面向.NET开发人员的Dapr——状态管理

目录:面向.NET开发人员的Dapr——前言面向.NET开发人员的Dapr——分布式世界面向.NET开发人员的Dapr——俯瞰Dapr面向.NET开发人员的Dapr——入门面向.NET开发人员的Dapr——参考应用程序The Dapr state management building blockDapr 状态管理构建基块Distributed…

为什么网易云音乐总能知道你喜欢听什么歌?背后的原理竟然如此简单!

全世界只有3.14 % 的人关注了数据与算法之美无处不在的数据分析谷歌的数据分析可以预测一个地区即将爆发的流感,从而进行针对性的预防;淘宝可以根据你浏览和消费的数据进行分析,为你精准推荐商品;口碑极好的网易云音乐&#xff0c…

判断小数是否相等_五年级上册数学综合练习题(填空、判断、选择、文字题),覆盖全册知识点!...

五年级上册判断题练习1、整数乘法的运算定律对小数乘法同样适用 .( )2、小数不一定比整数小。( )3、两个小数相除 ,如果商大于被除数 ,那么除数一定大于.( )4、两个数相除 ,商是 .8,如果除数缩小10倍,被除数不变 ,商是 0.8。( )5、小数乘法的意义与整数乘法的意义完全相…

次优二叉树

在有序序列的查找中,如果各个元素的查找概率都是一样的,那么二分查找是最快的查找算法,但是如果查找元素的查找概率是不一样的,那么用二分查找就不一定是最快的查找方法了,可以通过计算ASL来得知。所以基于这种查找元素…

每日一笑 | 老板,黑凤梨真的能吃吗?

全世界只有3.14 % 的人关注了数据与算法之美(图片来源于网络,侵权删)

crontab执行shell脚本日志中出现乱码

使用nutch开源的搜索引擎抓取网页信息,通过计划任务crontab执行shell脚本,并将启动信息记录进日志文件,但是每次都会出现乱码,如图所示经过反复测试,排除了java程序问题,文件权限问题,系统字符集…

学好数学建模,走哪买菜都不怕!

随着新学期的开始,数学建模的热度也在逐步回温(据说大家开始了数学建模知识储备),常有小伙伴私聊小天咨询关于数学建模的事情。大大小小的数学建模比赛如火如荼开展着,而如何快速掌握数学建模,做好充足的准…

[翻译]Go与C#的比较,第二篇:垃圾回收

Go vs C#, part 2: Garbage Collection | by Alex Yakunin | ServiceTitan — Titan Tech | Medium目录译者注什么是垃圾回收?什么是GCBurn?峰值分配吞吐量("速度测试")GCBurn 测试GC Burn测试结果结论.NET CoreGo两者…

写在《ASP.NET MVC 4 Web 编程》即将出版之际!献给有节操的程序员!

《Programming ASP.NET MVC 4》中文版即将上市了!非常荣幸我可以再次参与一本不错的技术书籍的翻译工作。 这也是在《WCF技术内幕》与《WCF服务编程》第三版之后,翻译的第三本书。此书由世界上最著名的计算机出版社Oreilly出版,中文版本由华中…

日本码农为了萝莉,竟然在GitHub上做这种事,“警察,快来抓我啊!”

全世界只有3.14 % 的人关注了数据与算法之美近日,日本刈谷市警方抓了一名13岁的小女孩,原因是“她将一段恶意代码的链接放到了网上,导致一千多台电脑系统崩溃。”其实,这就是一个入门级的恶作剧无限弹窗而已,只要你点了…

带老弟做个实时排行榜

阿巴可懂的实时排行榜设计和实现思路。大家好,我是鱼皮,暑假快到了,我的老弟小阿巴听说我家有很多好康的,就跑来找我玩。结果我摆出了几个以前开发过的小系统,准备在这段时间带着小阿巴多做些作品,学习编程…

每日一笑 | 在托运行李时,怎样才能不会因为超重被罚钱?

全世界只有3.14 % 的人关注了数据与算法之美(图片来源于网络,侵权删)

加时间水印_如何在手机照片上添加时间和日期?打开这个设置即可添加,超方便...

经常在朋友圈或者微博刷到一些照片,上面带有拍照时间和地点,甚至是天气,很多人还不知道是怎么操作的吗,今天小编就来告诉大家怎么操作,1分钟包学包会!1、照片添加文字、地址、天气打开手机相机,…

少儿编程教育是“揠苗助长”还是要培养未来的程序员?

▲数据汪特别推荐点击上图进入玩酷屋去年有一款名叫CoderMindz的棋类游戏在硅谷名声大噪,它的前身CoderBunnyz发布不到一年时间,销量超过1000余套,销售额以超35000美元,因此大家对新款CoderMindz充满期待。而这款游戏的开发者&…

日志ILog(文件日志/控制台日志/控件日志/网络日志)

日志组件是NewLife系列组件最早最基础,同时也是流血流泪最多的一个模块,它的底蕴定能感动每一个用户!没有日志的应用系统是不完整的。系统遇到啥问题,翻日志看看当时上下文,实在分析不出问题,修改代码再打几…

php crypt mysql password_php使用crypt()函数进行加密

一、代码$str 应用crypt()函数进行单向加密!; //声明字符串变量$strecho 加密前$str的值为:.$str;$crypttostr crypt($str); //对变量$str加密echo 加密后$str的值为:.$crypttostr; //输出加密后的变量?>二、运行结果参数不带salt,每次…