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
访问http://127.0.0.1:5000/login
![19. Flask web表单 Flask-WTF表单扩展_经验分享](https://s2.51cto.com/images/blog/202106/18/45cc2ffa38f3640a1312f14ad89e2163.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184)
再次输入用户名和密码直接提交如下:
![19. Flask web表单 Flask-WTF表单扩展_经验分享_02](https://s2.51cto.com/images/blog/202106/18/37909cfff58bb22ae672f21a9f2b822e.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184)
![19. Flask web表单 Flask-WTF表单扩展_经验分享_03](https://s2.51cto.com/images/blog/202106/18/874726752ac51429db42205741ed8427.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184)
直接使用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
如果不填写任何数据,则会提示如下:
![19. Flask web表单 Flask-WTF表单扩展_经验分享_04](https://s2.51cto.com/images/blog/202106/18/9c46419832a45c7341bcab65104f16e5.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184)
填写两次密码不一致,提示如下:
![19. Flask web表单 Flask-WTF表单扩展_经验分享_05](https://s2.51cto.com/images/blog/202106/18/4c5971b2a3b1b68a26cdab6aa66406a5.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184)
![19. Flask web表单 Flask-WTF表单扩展_经验分享_06](https://s2.51cto.com/images/blog/202106/18/f369bbfbd4050aad3715e239481c4e6e.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184)
正确填写注册信息,查看是否正常跳至index页面,如下:
![19. Flask web表单 Flask-WTF表单扩展_经验分享_07](https://s2.51cto.com/images/blog/202106/18/b4db7f9ee26e675d2dc1f16966e54e50.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184)
自动验证表单内容通过,并跳至index页面。
从上面的示例可以看到,使用**if form.validate_on_submit():**就可以直接验证所有字段,可以省事多了。