【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。

相关文章

Spring Boot 处理带文件表单的方式汇总

Spring Boot 处理带文件表单的方式汇总

《SpringBoot处理带文件表单的方式汇总》本文详细介绍了六种处理文件上传的方式,包括@RequestParam、@RequestPart、@ModelAttribute、@ModelAttr... 目录方式 1：@RequestParam接收文件后端代码前端代码特点方式 2：@RequestPart接
阅读更多...
python中的flask_sqlalchemy的使用及示例详解

python中的flask_sqlalchemy的使用及示例详解

《python中的flask_sqlalchemy的使用及示例详解》文章主要介绍了在使用SQLAlchemy创建模型实例时,通过元类动态创建实例的方式,并说明了如何在实例化时执行__init__方法,... 目录@orm.reconstructorSQLAlchemy的回滚关联其他模型数据库基本操作将数据添
阅读更多...
JavaWeb项目创建、部署、连接数据库保姆级教程(tomcat)

JavaWeb项目创建、部署、连接数据库保姆级教程(tomcat)

《JavaWeb项目创建、部署、连接数据库保姆级教程(tomcat)》：本文主要介绍如何在IntelliJIDEA2020.1中创建和部署一个JavaWeb项目,包括创建项目、配置Tomcat服务... 目录简介：一、创建项目二、tomcat部署1、将tomcat解压在一个自己找得到路径2、在idea中添加
阅读更多...
JavaWeb 中的 Filter组件详解

JavaWeb 中的 Filter组件详解

《JavaWeb中的Filter组件详解》本文详细介绍了JavaWeb中的Filter组件,包括其基本概念、工作原理、核心接口和类、配置方式以及常见应用示例,Filter可以实现请求预处理、响应后... 目录JavaWeb 中的 Filter 详解1. Filter 基本概念1.1 什么是 Filter1.
阅读更多...
Vue3 如何通过json配置生成查询表单

Vue3 如何通过json配置生成查询表单

《Vue3如何通过json配置生成查询表单》本文给大家介绍Vue3如何通过json配置生成查询表单,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录功能实现背景项目代码案例功能实现背景通过vue3实现后台管理项目一定含有表格功能，通常离不开表单
阅读更多...
Web服务器-Nginx-高并发问题

Web服务器-Nginx-高并发问题

《Web服务器-Nginx-高并发问题》Nginx通过事件驱动、I/O多路复用和异步非阻塞技术高效处理高并发,结合动静分离和限流策略,提升性能与稳定性... 目录前言一、架构1. 原生多进程架构2. 事件驱动模型3. IO多路复用4. 异步非阻塞 I/O5. Nginx高并发配置实战二、动静分离1. 职责2
阅读更多...
SpringBoot通过main方法启动web项目实践

SpringBoot通过main方法启动web项目实践

《SpringBoot通过main方法启动web项目实践》SpringBoot通过SpringApplication.run()启动Web项目,自动推断应用类型,加载初始化器与监听器,配置Spring... 目录1. 启动入口：SpringApplication.run()2. SpringApplicat
阅读更多...
Unity新手入门学习殿堂级知识详细讲解（图文）

Unity新手入门学习殿堂级知识详细讲解（图文）

《Unity新手入门学习殿堂级知识详细讲解（图文）》Unity是一款跨平台游戏引擎,支持2D/3D及VR/AR开发,核心功能模块包括图形、音频、物理等,通过可视化编辑器与脚本扩展实现开发,项目结构含A... 目录入门概述什么是 UnityUnity引擎基础认知编辑器核心操作Unity 编辑器项目模式分类工程
阅读更多...
Python Flask实现定时任务的不同方法详解

Python Flask实现定时任务的不同方法详解

《PythonFlask实现定时任务的不同方法详解》在Flask中实现定时任务,最常用的方法是使用APScheduler库,本文将提供一个完整的解决方案,有需要的小伙伴可以跟随小编一起学习一下... 目录完js整实现方案代码解释1. 依赖安装2. 核心组件3. 任务类型4. 任务管理5. 持久化存储生产环境
阅读更多...
Python学习笔记之getattr和hasattr用法示例详解

Python学习笔记之getattr和hasattr用法示例详解

《Python学习笔记之getattr和hasattr用法示例详解》在Python中,hasattr()、getattr()和setattr()是一组内置函数,用于对对象的属性进行操作和查询,这篇文章... 目录1.getattr用法详解1.1 基本作用1.2 示例1.3 原理2.hasattr用法详解2.
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2