Flask web表单 Flask-WTF表单扩展

2019-12-19 19:36:29 浏览数 (1)

Web表单

web表单是web应用程序的基本功能。

它是HTML页面中负责数据采集的部件。表单有三个部分组成：表单标签、表单域、表单按钮。表单允许用户输入数据，负责HTML页面数据采集，通过表单将用户输入的数据提交给服务器。

在Flask中，为了处理web表单，我们一般使用Flask-WTF扩展，它封装了WTForms，并且它有验证表单数据的功能。

安装Flask-WTF扩展

代码语言：javascript复制
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表单：

代码语言：javascript复制
<!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.视图函数中获取表单数据：

代码语言：javascript复制
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

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

直接使用HTML来写表单可以实现提交信息的效果。但是需要考虑这几点，如果参数很多，后台也是需要一个个去校验的，直接这样去接受参数再校验的话，这个工作量就会有些大。

而且还会出现csrf的攻击问题，这时候就可以使用Flask-WTF来创建表单，避免这些问题。

使用Flask-WTF来编写表单

1.编写两个视图函数，以及form表单类，用于注册以及跳转index页面

代码语言：javascript复制
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模板，用于作为注册页面

代码语言：javascript复制
<!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():就可以直接验证所有字段，可以省事多了。

flask 网站 html

0 人点赞