Flask web表單 Flask-WTF表單擴展

時間 2019-12-19

標籤 flask web 表單 wtf 擴展欄目 Python 简体版

原文原文鏈接

Web表單

web表單是web應用程序的基本功能。html

它是HTML頁面中負責數據採集的部件。表單有三個部分組成：表單標籤、表單域、表單按鈕。表單容許用戶輸入數據，負責HTML頁面數據採集，經過表單將用戶輸入的數據提交給服務器。前端

在Flask中，爲了處理web表單，咱們通常使用Flask-WTF擴展，它封裝了WTForms，而且它有驗證表單數據的功能。web

安裝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。flask

CSRF_ENABLED是爲了CSRF（跨站請求僞造）保護。 SECRET_KEY用來生成加密令牌，當CSRF激活的時候，該設置會根據設置的密匙生成加密令牌。bash

直接在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.視圖函數中獲取表單數據：session

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.測試loginapp

訪問http://127.0.0.1:5000/login函數

再次輸入用戶名和密碼直接提交以下：post

直接使用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

若是不填寫任何數據，則會提示以下：