Web表单
web表单是web应用程序的基本功能。
它是HTML页面中负责数据采集的部件。表单有三个部分组成：表单标签、表单域、表单按钮。表单允许用户输入数据，负责HTML页面数据采集，通过表单将用户输入的数据提交给服务器。
在Flask中，为了处理web表单，我们一般使用Flask-WTF扩展，它封装了WTForms，并且它有验证表单数据的功能。
安装Flask-WTF扩展
pip3 install Flask-WTF
WTForms支持的HTML标准字段
| 字段对象 | 说明 |
|---|---|
| StringField | 文本字段 |
| TextAreaField | 多行文本字段 |
| PasswordField | 密码文本字段 |
| HiddenField | 隐藏文本字段 |
| DateField | 文本字段，值为datetime.date格式 |
| DateTimeField | 文本字段，值为datetime.datetime格式 |
| IntegerField | 文本字段，值为整数 |
| DecimalField | 文本字段，值为decimal.Decimal |
| FloatField | 文本字段，值为浮点数 |
| BooleanField | 复选框，值为True和False |
| RadioField | 一组单选框 |
| SelectField | 下拉列表 |
| SelectMultipleField | 下拉列表，可选择多个值 |
| FileField | 文本上传字段 |
| SubmitField | 表单提交按钮 |
| FormField | 把表单作为字段嵌入另一个表单 |
| FieldList | 一组指定类型的字段 |
WTForms常用验证函数
| 验证函数 | 说明 |
|---|---|
| DataRequired | 确保字段中有数据 |
| EqualTo | 比较两个字段的值，常用于比较两次密码输入 |
| Length | 验证输入的字符串长度 |
| NumberRange | 验证输入的值在数字范围内 |
| URL | 验证URL |
| AnyOf | 验证输入值在可选列表中 |
| NoneOf | 验证输入值不在可选列表中 |
使用Flask-WTF需要配置参数SECRET_KEY。
CSRF_ENABLED是为了CSRF（跨站请求伪造）保护。 SECRET_KEY用来生成加密令牌，当CSRF激活的时候，该设置会根据设置的密匙生成加密令牌。
直接在HTML页面写form表单的示例
1. 在创建模板login.html页面中直接写form表单：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form method="post">
<input type="text" name="username" placeholder='Username'>
<input type="password" name="password" placeholder='password'>
<input type="submit">
</form>
{% if method == 'GET' %}
请求的方式：{{ method }}
{% elif method == 'POST' %}
请求的方式：{{ method }}
用户名：{{ username }}
密码： {{ password }}
{% endif %}
</body>
</html>
2.视图函数中获取表单数据：
from flask import Flask,render_template,request
# 创建Flask的app应用
app = Flask(__name__)
# index视图函数
@app.route("/login",methods=['GET','POST'])
def login():
context = dict()
if request.method == 'POST':
username = request.form['username']
password = request.form['password']
print(username, password)
context = {
'username': username,
'password': password,
}
context.update({'method': request.method})
return render_template('login.html', **context)
if __name__ == '__main__':
app.run(debug=True)
3.测试login
再次输入用户名和密码直接提交如下：
直接使用HTML来写表单可以实现提交信息的效果。但是需要考虑这几点，如果参数很多，后台也是需要一个个去校验的，直接这样去接受参数再校验的话，这个工作量就会有些大。
而且还会出现csrf的攻击问题，这时候就可以使用Flask-WTF来创建表单，避免这些问题。
使用Flask-WTF来编写表单
1.编写两个视图函数，以及form表单类，用于注册以及跳转index页面
from flask import Flask, render_template, redirect, url_for, session
# 导入Flask-WTF表单
from flask_wtf import FlaskForm
# 导入表单所需要的字段类型
from wtforms import StringField, PasswordField, SubmitField
# 导入表单的验证器
from wtforms.validators import DataRequired, EqualTo
app = Flask(__name__)
# 设置密钥，用于csrf_token的加解密
app.config["SECRET_KEY"] = "xhosd6f982yfhowefy29f"
# 定义表单的模型类
class RegisterForm(FlaskForm):
"""自定义的注册表单模型类"""
# DataRequired 保证数据必须填写，并且不能为空
user_name = StringField(label="用户名", validators=[DataRequired("用户名不能为空")]) # 参数：名字,验证器列表
password = PasswordField(label="密码", validators=[DataRequired("密码不能为空")])
password2 = PasswordField(label="确认密码",validators=[DataRequired("确认密码不能为空"),EqualTo("password", "两次密码不一致")])
submit = SubmitField(label="提交")
@app.route("/register", methods=["GET", "POST"])
def register():
# 创建表单对象, 如果是post请求，前端发送了数据，flask会把数据在构造form对象的时候，存放到对象中
form = RegisterForm()
# 判断form中的数据是否合理
# 如果form中的数据完全满足所有的验证器，则返回真，否则返回假
if form.validate_on_submit():
# 表示验证合格
# 提取数据
uname = form.user_name.data
pwd = form.password.data
pwd2 = form.password2.data
print(uname, pwd, pwd2)
session["user_name"] = uname
return redirect(url_for("index"))
return render_template("register.html", form=form)
@app.route("/index")
def index():
user_name = session.get("user_name", "")
return "hello %s" % user_name
if __name__ == '__main__':
app.run(debug=True)
2.编写一个register.html模板，用于作为注册页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form method="post">
{{ form.csrf_token }}
{{ form.user_name.label }}
<p>{{form.user_name}}</p>
{% for msg in form.user_name.errors %}
<p>{{msg}}</p>
{% endfor %}
{{ form.password.label }}
<p>{{form.password}}</p>
{% for msg in form.password.errors %}
<p>{{msg}}</p>
{% endfor %}
{{ form.password2.label }}
<p>{{form.password2}}</p>
{% for msg in form.password2.errors %}
<p>{{msg}}</p>
{% endfor %}
{{form.submit}}
</form>
</body>
</html>
3.登录注册页面
访问http://127.0.0.1:5000/register
如果不填写任何数据，则会提示如下：
填写两次密码不一致，提示如下：
正确填写注册信息，查看是否正常跳至index页面，如下：
自动验证表单内容通过，并跳至index页面。
从上面的示例可以看到，使用if form.validate_on_submit():就可以直接验证所有字段，可以省事多了。
