本文主要是介绍【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）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
