百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

Python Flask Web表单

myzbx 2025-03-05 19:30 51 浏览

学习照猫画虎,是一种享受,实际上学习的痛苦是短暂的,没去学的痛苦是长期的。以后会有很多瞬间,因为你自己不会,而错失了良机~


1、配置

Flask-WTF 可以把处理Web表单的过程变成一种愉快的体验,首先是安装~

ailx10

10w+ 次咨询

网络安全优秀回答者

网络安全硕士

去咨询

然后是配置一个应用密钥,越复杂越好,这是为了防止CSRF跨站脚本伪造,Flask-WTF为所有表单生成安全令牌,存储在用户会话中~

2、表单类

每个表单都由一个继承 FlaskForm 的类表示,这个类定义表单中的一组字段,每个字段都是一个对象,字段对象可以附属多个验证函数,用于验证用户提交的数据是否有效~

  • NameForm 是一个大表单
  • name 是StringField类对象,表示type="text"的元素
  • submit 是SubmitField类对象,表示type="submit"的元素
  • 对象的第一个参数会渲染成 label

字段类型

说明

BooleanField

复选框,值为True或False

DateField

文本字段,值为datetime.date格式

DateTimeField

文本字段,值为datetime.datetime格式

DecimalField

文本字段,值为decimal.Decimal

FileField

文件上传字段

HiddenField

隐藏的文本字段

MultipleFileField

多文件创段字段

FieldList

一组指定类型的字段

FloatField

文本字段,值为浮点型

FormField

把一个表单作为字段,嵌入另一个表单

IntegerField

文本字段,值为整数

PasswordField

密码文本字段

RadioField

一组单选按钮

SelectField

下拉列表

SelectMultipleField

下拉列表,值可以多选

SubmitField

表单提交按钮

StringField

文本字段

TextAreaField

多行文本字段

常见的wtf 表单验证函数

验证函数

说明

DataRequired

确保转换类型后字段中有数据

Email

验证电子邮件

EqualTo

比较两个字段的值

InputRequired

确保转换类型前字段中有数据

IPAddress

验证IPv4网络地址

Length

验证输入字符串的长度

MacAddress

验证MAC地址

NumberRange

验证输入的值在数字范围之内

Optional

允许字段中没有输入

Regexp

使用正则表达式验证输入值

URL

验证URL

UUID

验证UUID

AnyOf

验证输入值在一组可能的值中

NoneOf

确保输入值不在一组可能的值中

3、把表单渲染成HTML

可以使用Bootstrap预定义的表单样式渲染整个Flask-WTF表单,只需要2句话就可以了,wtf.quick_form() 函数的参数是Flask-WTF表单对象,使用Bootstrap的默认样式渲染传入的表单~

{% import "bootstrap/wtf.html" as wtf %}
{{ wtf.quick_form(form) }}

4、在视图中处理表单

  • 直接请求,没有提交表单,是GET请求
  • 提交表单,就是POST请求
  • form参数和name参数,都会进入index.html进行渲染
@app.route("/",methods=["GET","POST"])
def index():
    name = None
    form = NameForm()
    if form.validate_on_submit():
        name = form.name.data
        form.name.data = ""
    return render_template("index.html",form=form,name=name)

输入ailx10,然后提交表单,渲染效果如下:

5、重定向和用户会话

当我们刷新页面的时候,页面会弹出来一个对话框,这是因为我们是POST提交的表单,页面刷新会再次提交表单,但是这并不是我们期望的~

于是就有了重定向了,我们最好让Web应用以GET方式结尾,这样怎么刷新都没问题~

  • redirect(url_for("index")) 重定向到一个新的URL
  • name=session.get("name") 如果没有GET到内容,返回None
@app.route("/",methods=["GET","POST"])
def index():
    form = NameForm()
    if form.validate_on_submit():
        session["name"] = form.name.data
        return redirect(url_for("index"))
    return render_template("index.html",form=form,name=session.get("name"))

6、闪现消息

请求完成后,有时需要让用户感知状态发送了变化,Flask内置了这个功能~

flash函数可以实现这个效果,如果你第一次和第二次输入的名字不一样,那么会出现一个提醒:“你改名字啦~“

{% block content %}
{% for message in get_flashed_messages() %}
{{ message }}
{% endfor %} {% block page_content %}{% endblock %}
{% endblock %}
@app.route("/",methods=["GET","POST"])
def index():
    form = NameForm()
    if form.validate_on_submit():
        old_name = session.get("name")
        if old_name is not None and old_name != form.name.data:
            flash("你改名字啦~")
        session["name"] = form.name.data
        return redirect(url_for("index"))
    return render_template("index.html",form=form,name=session.get("name"))

本篇完,谢谢大家~

发布于 2021-01-12 23:08 (知乎)

相关推荐

如何设计一个优秀的电子商务产品详情页

加入人人都是产品经理【起点学院】产品经理实战训练营,BAT产品总监手把手带你学产品电子商务网站的产品详情页面无疑是设计师和开发人员关注的最重要的网页之一。产品详情页面是客户作出“加入购物车”决定的页面...

怎么在JS中使用Ajax进行异步请求?

大家好,今天我来分享一项JavaScript的实战技巧,即如何在JS中使用Ajax进行异步请求,让你的网页速度瞬间提升。Ajax是一种在不刷新整个网页的情况下与服务器进行数据交互的技术,可以实现异步加...

中小企业如何组建,管理团队_中小企业应当如何开展组织结构设计变革

前言写了太多关于产品的东西觉得应该换换口味.从码农到架构师,从前端到平面再到UI、UE,最后走向了产品这条不归路,其实以前一直再给你们讲.产品经理跟项目经理区别没有特别大,两个岗位之间有很...

前端监控 SDK 开发分享_前端监控系统 开源

一、前言随着前端的发展和被重视,慢慢的行业内对于前端监控系统的重视程度也在增加。这里不对为什么需要监控再做解释。那我们先直接说说需求。对于中小型公司来说,可以直接使用三方的监控,比如自己搭建一套免费的...

Ajax 会被 fetch 取代吗?Axios 怎么办?

大家好,很高兴又见面了,我是"高级前端进阶",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发!今天给大家带来的主题是ajax、fetch...

前端面试题《AJAX》_前端面试ajax考点汇总

1.什么是ajax?ajax作用是什么?AJAX=异步JavaScript和XML。AJAX是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX可以使网页实...

Ajax 详细介绍_ajax

1、ajax是什么?asynchronousjavascriptandxml:异步的javascript和xml。ajax是用来改善用户体验的一种技术,其本质是利用浏览器内置的一个特殊的...

6款可替代dreamweaver的工具_替代powerdesigner的工具

dreamweaver对一个web前端工作者来说,再熟悉不过了,像我07年接触web前端开发就是用的dreamweaver,一直用到现在,身边的朋友有跟我推荐过各种更好用的可替代dreamweaver...

我敢保证,全网没有再比这更详细的Java知识点总结了,送你啊

接下来你看到的将是全网最详细的Java知识点总结,全文分为三大部分:Java基础、Java框架、Java+云数据小编将为大家仔细讲解每大部分里面的详细知识点,别眨眼,从小白到大佬、零基础到精通,你绝...

福斯《死侍》发布新剧照 "小贱贱"韦德被改造前造型曝光

时光网讯福斯出品的科幻片《死侍》今天发布新剧照,其中一张是较为罕见的死侍在被改造之前的剧照,其余两张剧照都是死侍在执行任务中的状态。据外媒推测,片方此时发布剧照,预计是为了给不久之后影片发布首款正式预...

2021年超详细的java学习路线总结—纯干货分享

本文整理了java开发的学习路线和相关的学习资源,非常适合零基础入门java的同学,希望大家在学习的时候,能够节省时间。纯干货,良心推荐!第一阶段:Java基础重点知识点:数据类型、核心语法、面向对象...

不用海淘,真黑五来到你身边:亚马逊15件热卖爆款推荐!

Fujifilm富士instaxMini8小黄人拍立得相机(黄色/蓝色)扫二维码进入购物页面黑五是入手一个轻巧可爱的拍立得相机的好时机,此款是mini8的小黄人特别版,除了颜色涂装成小黄人...

2025 年 Python 爬虫四大前沿技术:从异步到 AI

作为互联网大厂的后端Python爬虫开发,你是否也曾遇到过这些痛点:面对海量目标URL,单线程爬虫爬取一周还没完成任务;动态渲染的SPA页面,requests库返回的全是空白代码;好不容易...

最贱超级英雄《死侍》来了!_死侍超燃

死侍Deadpool(2016)导演:蒂姆·米勒编剧:略特·里斯/保罗·沃尼克主演:瑞恩·雷诺兹/莫蕾娜·巴卡林/吉娜·卡拉诺/艾德·斯克林/T·J·米勒类型:动作/...

停止javascript的ajax请求,取消axios请求,取消reactfetch请求

一、Ajax原生里可以通过XMLHttpRequest对象上的abort方法来中断ajax。注意abort方法不能阻止向服务器发送请求,只能停止当前ajax请求。停止javascript的ajax请求...