form提交表单_19. Flask web表单 FlaskWTF表单扩展

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表单:

span style="line-height: 26px;">html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
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

1bc2f082c2c517b513668bfe42486b13.png

再次输入用户名和密码直接提交如下:

036dfb2a87618458a2e4c7a546b2a44d.png
7246a80447acffc17949d6119200397e.png

直接使用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模板,用于作为注册页面

span style="line-height: 26px;">html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
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

如果不填写任何数据,则会提示如下:

7839ec692f707cdd73280b012b9bc5d4.png

填写两次密码不一致,提示如下:

53ab0b7c5c2340dc26573578ed3ab0c4.png
2fe302b248aec844568232454c2feb56.png

正确填写注册信息,查看是否正常跳至index页面,如下:

f856f7e17b90d2b2b1c5de222b896b05.png

自动验证表单内容通过,并跳至index页面。

从上面的示例可以看到,使用**if form.validate_on_submit():**就可以直接验证所有字段,可以省事多了。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值