【Flask】学习——Web表单（普通表单和Flask-WTF）

2023-11-05 01:10
文章标签 学习 表单 web flask 普通 wtf

本文主要是介绍【Flask】学习——Web表单（普通表单和Flask-WTF），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

  • 一、概述
  • 二、普通表单示例
    • 2.1 普通的表单
    • 2.2 flash消息优化普通表单
  • 三、WTForms支持
    • 3.1 HTML标准字段
    • 3.2 常用验证函数
  • 四、WTForm示例
  • 五、WTForm逻辑验证

一、概述

Web表单是Web应用程序的基本功能。

它是HTML页面中负责数据采集的部件，表单有三个部分组成：表单标签、表单域、表单按钮。表单允许用户输入数据，负责HTML页面数据采集，通过表单将用户输入的数据提交给服务器。

在FLask中，为了处理web表单，一般使用Flask-WTF扩展，它封装了WTForms，并且它有验证表单数据的功能

二、普通表单示例

下面是使用普通方式实现的表单：

2.1 普通的表单

在网页端输入账号、密码和确认密码后，当填写内容不为空，且密码与确认密码相同时，点击提交即可返回success字符串。当内容填写不完整时，面板显示“参数不完整”，当两次密码不相同时，面板显示 “密码不一致”。演示效果如下:
在这里插入图片描述

index.html文件：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><form method="post"><label>用户名：</label><input type="text" name="username"><br><label>密码：</label><input type="password" name="password"><br><label>确认密码：</label><input type="password" name="password2"><br><input type="submit" value="提交"><br>
</form></body>
</html>

FLask-WTF-demo.py文件：

from flask import Flask, render_template, requestapp = Flask(__name__)'''
目的：实现一个简单的登录的逻辑处理
1. 路由需要有get和post两种请求方式--》需要判断请求方式
2. 获取请求的参数
3. 判断参数是否填写以及密码是否相同
4. 如果判断都没有问题，就返回一个success
'''@app.route('/', methods=['GET', 'POST'])
def index():# request：请求对象-》判断请求方式# 1. 判断请求方式if request.method == 'POST':# 2. 获取请求的参数username = request.form.get('username')password = request.form.get('password')password2 = request.form.get('password2')print('用户名：' + username)# 3. 验证参数是否填写 & 密码是否相同if not all([username, password, password2]):print('参数不完整')elif password != password2:print('密码不一致')else:return 'success'return render_template('index.html')if __name__ == '__main__':app.run()

2.2 flash消息优化普通表单

在3.1的基础上对代码进行优化，使用flash传递消息，使提示“参数不完整”和“密码不一致”能够显示在网页上。flash在传递的过程中需要secret_key进行加密。效果如下：
在这里插入图片描述

index.html文件：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><form method="post"><label>用户名：</label><input type="text" name="username"><br><label>密码：</label><input type="password" name="password"><br><label>确认密码：</label><input type="password" name="password2"><br><input type="submit" value="提交"><br>{# 使用遍历获取flash消息 #}{% for message in get_flashed_messages() %}{{ message }}{% endfor %}</form></body>
</html>

FLask-WTF-demo.py文件：

from flask import Flask, render_template, request, flashapp = Flask(__name__)app.secret_key = 'suibianxie'   # 设置secret_key，做加密消息的混淆
'''
目的：实现一个简单的登录的逻辑处理
1. 路由需要有get和post两种请求方式--》需要判断请求方式
2. 获取请求的参数
3. 判断参数是否填写以及密码是否相同
4. 如果判断都没有问题，就返回一个success
''''''
给模板传递消息
flash-->需要对内容加密，因此需要设置secret_key，做加密消息的混淆
模板中需要去遍历消息
'''@app.route('/', methods=['GET', 'POST'])
def index():# request：请求对象-》判断请求方式# 1. 判断请求方式if request.method == 'POST':# 2. 获取请求的参数username = request.form.get('username')password = request.form.get('password')password2 = request.form.get('password2')print('用户名：' + username)# 3. 验证参数是否填写 & 密码是否相同if not all([username, password, password2]):#  print('参数不完整')flash(u'参数不完整')      # u用于解决编码问题elif password != password2:# print('密码不一致')flash(u'密码不一致')else:return 'success'return render_template('index.html')if __name__ == '__main__':app.run()

三、WTForms支持

除了flask本身，还需要安装依赖Flask-WTF。

使用依赖时，需要像下面一样导入这些字段。

from wtforms import StringField, PasswordField, SubmitField

3.1 HTML标准字段

字段对象说明
StringField文本字段
TextAreaField多行文本字段
PasswordField密码文本字段
HiddenField隐藏文件字段
DateField文本字段，值为datetime.date文本格式
DateTimeField文本字段，值为datetime.datetime文本格式
IntegerField文本字段，值为整数
DecimalField文本字段，值为decimal.Decimal
FloatField文本字段，值为浮点数
DadioField一组单选框
SelectField下拉列表
SelectMutipleField下拉列表，可选择多个值
FileField文件上传字段
SubmitField表单提交按钮
FormField把表单作为字段嵌入另一个表单
FieldList一组指定类型的字段

3.2 常用验证函数

验证函数说明
DataRequired确保字段中有数据
EqualTo比较两个字段的值，常用于比较两次密码输入
Length验证输入的字符串长度
NumberRanger验证输入的值在数字范围内
URL验证URL
AnyOf验证输入值在可选列表中
NoneOf验证输入值不再可选列表中

使用Flash-WTF需要配置参数SECRET_KEY。

CSRF_ENABLED是为了CSRF（跨站请求伪造）保护。SECRET_KEY用来生成加密令牌，当CSRF激活的时候，该设置根据设置的密钥生成加密令牌。

四、WTForm示例

同2.1、2.2内容一样，只不过该部分使用了Flask-WTF表单，效果如下：
在这里插入图片描述
除了flask本身，还需要安装依赖Flask-WTF，下面是代码部分：

Flask-WTF-demo.py文件:

目的：实现一个简单的登录的逻辑处理
1. 路由需要有get和post两种请求方式--》需要判断请求方式
2. 获取请求的参数
3. 判断参数是否填写以及密码是否相同
4. 如果判断都没有问题，就返回一个success
''''''
给模板传递消息
flash-->需要对内容加密，因此需要设置secret_key，做加密消息的混淆
模板中需要去遍历消息
''''''
使用WTF实现表单
需要自定义表单类
'''class LoginForm(FlaskForm):username = StringField(u'用户名:')password = PasswordField(u'密码:')password2 = PasswordField(u'确认密码:')submit = SubmitField(u'提交')@app.route('/', methods=['GET', 'POST'])
def login():login_form = LoginForm()return render_template('index.html', form=login_form)if __name__ == '__main__':app.run()

index.html文件：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><hr><form method="post">{{ form.username.label }}{{ form.username }}<br>{{ form.password.label }}{{ form.password }}<br>{{ form.password2.label }}{{ form.password2 }}<br>{{ form.submit }}
</form></body>
</html>

五、WTForm逻辑验证

通过WTF扩展实现逻辑验证，使用了DataRequired()和EqualTo()两种验证函数。在第二部分和第四部分的基础上进行代码修改。

当内容未填写完全时：
在这里插入图片描述
当全部填入正确时，返回success。

Flask-WTF-demo.py文件:

from flask import Flask, request, render_template, flash
from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField
from wtforms.validators import DataRequired, EqualToapp = Flask(__name__)app.secret_key = 'suibianxie'   # 设置secret_key，做加密消息的混淆'''
目的：实现一个简单的登录的逻辑处理
1. 路由需要有get和post两种请求方式--》需要判断请求方式
2. 获取请求的参数
3. 判断参数是否填写以及密码是否相同
4. 如果判断都没有问题，就返回一个success
''''''
给模板传递消息
flash-->需要对内容加密，因此需要设置secret_key，做加密消息的混淆
模板中需要去遍历消息
''''''
使用WTF实现表单
需要自定义表单类
'''class LoginForm(FlaskForm):# validators 为列表username = StringField(u'用户名:', validators=[DataRequired()])password = PasswordField(u'密码:', validators=[DataRequired()])#  EqualTo()第一个参数表示与哪个变量对比，第二个参数表示大概不同时返回值password2 = PasswordField(u'确认密码:', validators=[DataRequired(), EqualTo('password')])submit = SubmitField(u'提交')@app.route('/', methods=['GET', 'POST'])
def login():login_form = LoginForm()# 1. 判断请求方式if request.method == 'POST':# 2. 获取请求的参数username = request.form.get('username')password = request.form.get('password')password2 = request.form.get('password2')# 3.验证参数。WTF可以一句实现所有校验# 需要CSRF token,需要在html里开启if login_form.validate_on_submit():print(username, password)return 'success'else:flash('参数有误')return render_template('index.html', form=login_form)if __name__ == '__main__':app.run()

index.html文件：
注意：需要添加csrf，不然会出现错误。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><hr><form method="post">{{ form.csrf_token() }}{{ form.username.label }}{{ form.username }}<br>{{ form.password.label }}{{ form.password }}<br>{{ form.password2.label }}{{ form.password2 }}<br>{{ form.submit }}
</form></body>
</html>

参考
https://www.bilibili.com/video/BV17W41177oE?p=13
https://www.bilibili.com/video/BV17W41177oE?p=14
https://www.bilibili.com/video/BV17W41177oE?p=15
https://www.bilibili.com/video/BV17W41177oE?p=16

这篇关于【Flask】学习——Web表单（普通表单和Flask-WTF）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/346390。

相关文章

HarmonyOS学习(七)——UI（五）常用布局总结

HarmonyOS学习(七)——UI（五）常用布局总结

自适应布局 1.1、线性布局（LinearLayout） 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列，Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距，达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式，且在各类尺寸屏幕上表现一致，其中交叉轴为垂直时，取值为Vert
阅读更多...
Ilya-AI分享的他在OpenAI学习到的15个提示工程技巧

Ilya-AI分享的他在OpenAI学习到的15个提示工程技巧

Ilya（不是本人，claude AI）在社交媒体上分享了他在OpenAI学习到的15个Prompt撰写技巧。 以下是详细的内容： 提示精确化:在编写提示时,力求表达清晰准确。清楚地阐述任务需求和概念定义至关重要。例:不用"分析文本",而用"判断这段话的情感倾向:积极、消极还是中性"。 快速迭代:善于快速连续调整提示。熟练的提示工程师能够灵活地进行多轮优化。例:从"总结文章"到"用
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
学习hash总结

学习hash总结

2014/1/29/   最近刚开始学hash，名字很陌生，但是hash的思想却很熟悉，以前早就做过此类的题，但是不知道这就是hash思想而已，说白了hash就是一个映射，往往灵活利用数组的下标来实现算法，hash的作用：1、判重；2、统计次数；
阅读更多...
零基础学习Redis(10) -- zset类型命令使用

零基础学习Redis(10) -- zset类型命令使用

zset是有序集合，内部除了存储元素外，还会存储一个score，存储在zset中的元素会按照score的大小升序排列，不同元素的score可以重复，score相同的元素会按照元素的字典序排列。 1. zset常用命令 1.1 zadd  zadd key [NX | XX] [GT | LT]   [CH] [INCR] score member [score member ...]
阅读更多...
【机器学习】高斯过程的基本概念和应用领域以及在python中的实例

【机器学习】高斯过程的基本概念和应用领域以及在python中的实例

引言 高斯过程（Gaussian Process，简称GP）是一种概率模型，用于描述一组随机变量的联合概率分布，其中任何一个有限维度的子集都具有高斯分布 文章目录 引言一、高斯过程1.1 基本定义1.1.1 随机过程1.1.2 高斯分布 1.2 高斯过程的特性1.2.1 联合高斯性1.2.2 均值函数1.2.3 协方差函数（或核函数） 1.3 核函数1.4 高斯过程回归（Gauss
阅读更多...
Java Web指的是什么

Java Web指的是什么

Java Web指的是使用Java技术进行Web开发的一种方式。Java在Web开发领域有着广泛的应用，主要通过Java EE（Enterprise Edition）平台来实现。  主要特点和技术包括： 1. Servlets和JSP：     Servlets 是Java编写的服务器端程序，用于处理客户端请求和生成动态网页内容。     JSP（JavaServer Pages）
阅读更多...
【学习笔记】 陈强-机器学习-Python-Ch15 人工神经网络（1）sklearn

【学习笔记】 陈强-机器学习-Python-Ch15 人工神经网络（1）sklearn

系列文章目录 监督学习：参数方法 【学习笔记】 陈强-机器学习-Python-Ch4 线性回归 【学习笔记】 陈强-机器学习-Python-Ch5 逻辑回归 【课后题练习】 陈强-机器学习-Python-Ch5 逻辑回归（SAheart.csv） 【学习笔记】 陈强-机器学习-Python-Ch6 多项逻辑回归 【学习笔记 及 课后题练习】 陈强-机器学习-Python-Ch7 判别分析 【学
阅读更多...
系统架构师考试学习笔记第三篇——架构设计高级知识（20）通信系统架构设计理论与实践

系统架构师考试学习笔记第三篇——架构设计高级知识（20）通信系统架构设计理论与实践

本章知识考点：         第20课时主要学习通信系统架构设计的理论和工作中的实践。根据新版考试大纲,本课时知识点会涉及案例分析题(25分),而在历年考试中,案例题对该部分内容的考查并不多,虽在综合知识选择题目中经常考查,但分值也不高。本课时内容侧重于对知识点的记忆和理解,按照以往的出题规律,通信系统架构设计基础知识点多来源于教材内的基础网络设备、网络架构和教材外最新时事热点技术。本课时知识
阅读更多...
BUUCTF靶场[web][极客大挑战 2019]Http、[HCTF 2018]admin

BUUCTF靶场[web][极客大挑战 2019]Http、[HCTF 2018]admin

目录   [web][极客大挑战 2019]Http 考点：Referer协议、UA协议、X-Forwarded-For协议 [web][HCTF 2018]admin 考点：弱密码字典爆破 四种方法：   [web][极客大挑战 2019]Http 考点：Referer协议、UA协议、X-Forwarded-For协议 访问环境 老规矩，我们先查看源代码
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2