【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文件：
Title
FLask-WTF-demo.py文件：
from flask import Flask, render_template, request
app = 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文件：
Title
FLask-WTF-demo.py文件：
from flask import Flask, render_template, request, flash
app = 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, EqualTo
app = 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