flask外掛系列之Flask-WTF表單

阿新 • • 發佈：2018-12-12

flask_wtf是flask框架的表單驗證模組，可以很方便生成表單，也可以當做json資料互動的驗證工具，支援熱插拔。

安裝

pip install Flask-WTF

Flask-WTF其實是對wtforms元件的封裝，使其支援對flask框架的熱插拔。

簡單使用

# app.py
from flask import Flask, current_app, request, render_template
from forms import MyForm

app = Flask(__name__,template_folder='static/html')
@app.route('/',methods=['GET','POST'])
def login():
    form = MyForm()
    if form.validate_on_submit():
        return 'OK'
    return render_template('forms/index.html', form=form)
if __name__ == '__main__':
    app.run(host='127.0.0.1', port=80, debug=True)

# forms.py
from flask_wtf import FlaskForm
from wtforms import StringField
from wtforms.validators import DataRequired

class MyForm(FlaskForm):
    name = StringField('name', validators=[DataRequired()])

# forms/index.html
<form method="POST" action="/">
{{ form.csrf_token }}
{{ form.name.label }} {{ form.name(size=20) }}
<input type="submit" value="Go">
</form>

flask_wtf定義欄位

flask_wtf完全使用wtforms元件的欄位模型，wtforms對欄位的定義在fields模組；又分為core和simple，core模組定義了普通使用的欄位，simple在core模組的基礎上擴充套件了一些欄位，這些欄位會自動進行欄位級別的校驗。

欄位型別

# core.py
__all__ = (
    'BooleanField', 'DecimalField', 'DateField', 'DateTimeField', 'FieldList',
    'FloatField', 'FormField', 'IntegerField', 'RadioField', 'SelectField',
    'SelectMultipleField', 'StringField',
)
常用欄位說明：
BooleanField：布林型別，如Flask,True
StringField：字串型別
DecimalField：小數點文字欄位，如：‘1.23’
DateField：日期欄位，格式：'%Y-%m-%d'
DateTimeField:日期欄位，格式：'%Y-%m-%d %H:%M:%S'
FieldList:統一欄位型別組成列表，如：FieldList(StringField('Name', [validators.required()]))
FloatField:浮點數型別
IntegerField：整形
SelectMultipleField：多選框
RadioField：單選框

# simple.py
TextAreaField:文字域，可接受多行輸入
PasswordField：密碼欄位，輸入的不會直接在瀏覽器明文顯示
FileField：上傳檔案，但不會處理驗證檔案，需要手動處理
HiddenField：隱藏欄位
SubmitField：按鈕
TextField:字串型別的別名，棄用

表單定義

# 引數：
class UserAdminForm(FlaskForm):
    username = StringField(label='使用者名稱', validators=[DataRequired(),Length(4,20)])
    password_hash = PasswordField(label='密碼',validators=[DataRequired(),Length(4,20)])
    limit = SelectField(label='使用者許可權',
                        choices=[('guest', '所有許可權'),
                                 ('operation', '可讀可寫不可刪除'),
                                 ('management', '可讀不可寫')],
                        default='guest')  # 許可權

# 欄位一般的引數
# label:欄位的名字
# default：預設
# validators：欄位的驗證序列
# description：欄位的描述
# choices：SelectField和他的子類有的欄位，選擇框，多選一

欄位的驗證序列

欄位的引數validators可以指定提交表單的驗證序列，按照從左到右的順序，預設的可選驗證在wtforms.validators模組，已經封裝的驗證方法有：

__all__ = (
    'DataRequired', 'data_required', 'Email', 'email', 'EqualTo', 'equal_to',
    'IPAddress', 'ip_address', 'InputRequired', 'input_required', 'Length',
    'length', 'NumberRange', 'number_range', 'Optional', 'optional',
    'Required', 'required', 'Regexp', 'regexp', 'URL', 'url', 'AnyOf',
    'any_of', 'NoneOf', 'none_of', 'MacAddress', 'mac_address', 'UUID'
)
模組中大小寫有對應的方式，如DataRequired對應data_required。

DataRequired/data_required:驗證資料是否真實存在，即不能為空，必須是非空白字串，否則觸發StopValidation錯誤。
InputRequired/input_required：和DataRequired的區別在於可以是空白字串；
Required/required:data_required的別名
Email/email：驗證符合郵件的格式，只有最基本的驗證；
EqualTo/equal_to:比較兩個欄位的值，比如密碼和確認密碼，如果不相等就觸發錯誤，equal_to(field,message),需要輸入另一個欄位的名字。
IPAddress/ip_address:驗證是否是ip地址，預設驗證IPV4地址。
MacAddress/mac_address:驗證是否符合mac格式；
UUID：是否是uuid格式；
URL/url:驗證是否符合url格式；
Regexp/regexp:用提供的正則表示式驗證欄位；Regexp(r"")
Length/length:設定欄位值的長度，Length(min,max);
NumberRange/number_range:設定一個數字欄位的取值範圍，可以針對浮點數和小數；NumberRange(min,max)
Optional/optional:允許欄位為空並停止驗證；
NoneOf/none_of:將傳入的資料和無效的比較，是丟擲異常；Noneof(values).
Anyof/any_of:將傳入的資料和預設的資料比較，不是異常。Anyof(values).

自定義欄位驗證

如果預設的驗證序列不滿足我們的要求，我們可以通過繼承的方式自定義欄位。

from wtforms.validators import DataRequired,Length,StopValidation
class NewStringField(StringField):
    """
    自定義一個新的欄位
    """
    def pre_validate(self, form):
        """驗證方法，在validators驗證序列之前"""
        x:str = form.name.data
        if not x.startswith('g'):
            raise StopValidation("your data must be startswith 'g'")

    def post_validate(self, form, validation_stopped):
        """
        驗證方法，在validators驗證序列之後
        :param form:該欄位所屬的表單物件
        :param validation_stopped:前面驗證序列的結果，True表示驗證通過，False表示驗證失敗
        :return:
        """
        if not validation_stopped:
            raise ValueError("驗證失敗了！")
        pass

觸發StopValidation異常會停止驗證鏈；
自定義表單驗證

一般來說，如果對錶單有額外需要的驗證，一般自定義表單的額外的驗證方法而不是重新自定義新的欄位,而form已經為我們提供了這種方法。看Form物件的原始碼：

def validate(self):
    """
    Validates the form by calling `validate` on each field, passing any
    extra `Form.validate_<fieldname>` validators to the field validator.
    """
    extra = {}
    for name in self._fields:
        inline = getattr(self.__class__, 'validate_%s' % name, None)
        if inline is not None:
            extra[name] = [inline]

    return super(Form, self).validate(extra)

Form物件呼叫validate函式時會自動尋找validate_%s的方法新增到驗證序列,並在原先欄位的驗證序列驗證完畢後執行。

class MyForm(FlaskForm):
    name = StringField('name', validators=[DataRequired(), Length(4,20)])
    def validate_name(self, field):
        print(field.data)
        if hasattr(self, 'name') and len(self.name.data) > 5:
            print(self.name.data)
            return True
        raise ValidationError('超過5個字元')

# 在自定義的驗證方法中，丟擲異常使用ValidationError，validate會自動捕捉。

表單物件

flask_wtf推薦使用Form物件的子類FlaskForm代替，該物件提供了所有表單需要的屬性和方法。那麼Form物件是如何自動實現表單功能的呢？分析FlaskForm物件原始碼:

class FlaskForm(Form):
    class Meta(DefaultMeta):
        def wrap_formdata(self, form, formdata):
            pass

    def __init__(self, formdata=_Auto, **kwargs):
        csrf_enabled = kwargs.pop('csrf_enabled', None)
        pass
    def is_submitted(self):
        pass
    def validate_on_submit(self):
        pass
    def hidden_tag(self, *fields):
        pass
    def validate(self):
        pass

FlaskForm內部定義了一個Meta類，該類新增csrf保護的一些方法，所以建立表單的時候一定要匯入FlaskForm而不是Form.
is_submitted:檢查是否有一個活躍的request請求;
validate_on_submit:呼叫is_submitted和validate方法，返回一個布林值，用來判斷表單是否被提交；
validate：欄位級別的驗證，每個欄位都有一個validate方法，FlaskForm呼叫validate會對所有的欄位呼叫validate方法驗證，如果所有的驗證都通過返回Ture，否則丟擲異常。
hidden_tag：獲取表單隱藏的欄位；
wrap_formdata:獲取request中的form，每次form物件初始化時會執行該函式從request獲取form。
重要屬性

form.data:欄位名字和值組成的字典；
form.errors：驗證失敗的資訊字典，在呼叫validate_on_submit方法後才有效；
form.name.data：欄位name的值；
form.name.type：欄位name的型別

常用場景

登入驗證

# froms.py
class UserPasswordForm(FlaskForm):
    """
    登入提交的表單
    """
    username = StringField('User', validators=[DataRequired()])
    password = PasswordField('Password', validators=[DataRequired()])

# form.html
<form method="POST" action="/">
{{ form.csrf_token }}
{{ form.username.label }} {{ form.username(size=20) }}
{{ form.password.label }} {{ form.password }}
<input type="submit" value="Go">
</form>

# views.py
@app.route('/login',methods=['GET','POST'])
def login():
    form = UserPasswordForm()
    if form.validate_on_submit():
        # 驗證表單
        if form.username.data == "xiaoming" and form.password.data == '123':
            return 'OK'
    return render_template('forms/index.html', form=form)

ajax請求轉化表單

有時候我們沒有html頁面的表單，只有ajax請求的資料互動，但是想借用Form來定義介面和驗證接收的資料，如果ajax的請求方法是('POST', 'PUT', 'PATCH', 'DELETE')中的一種，FlaskForm會自動從request物件中呼叫request.form和request.get_json()方法來接收資料，因此這種方式十分方便。注意：get方法不再其中。

# form.py
class MyForm(FlaskForm):
    name = StringField('name', validators=[DataRequired(), Length(4,20)])
# view.py
@app.route('/form',methods=['GET','POST'])
def form():
    if request.method != "GET":
        form = MyForm() # form會獲取請求資料
        print(form.data)
        return 'ok'
    return ''
# test.py
import requests as req
import json

class ProTest():
    baseurl = 'http://127.0.0.1:80'
    def test_form(self):
        url = self.baseurl + '/form'
        rsp = req.post(url,json={'name':'hhhh'})
        # rsp = req.get(url,json={'name':'hhhh'})
if __name__ == '__main__':
    test = ProTest()
    test.test_form()

form啟用csrf保護

預設csrf保護是開啟的，只要在html檔案中新增{{ form.csrf_token }}，app必須設定SECRET_KEY引數。

# 禁用保護
form = Form(csrf_enabled=False)
# 或配置app時
WTF_CSRF_ENABLED = False

一般資料csrf保護

同理必須設定SECRET_KEY引數。

from flask_wtf.csrf import CsrfProtect
csrf = CsrfProtect()

def create_app():
    app = Flask(__name__)
    csrf.init_app(app)

# 模板中新增一個隱藏域
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
<meta name="csrf-token" content="{{ csrf_token() }}">
# 如果是ajax請求，可以在指令碼中
var csrftoken = "{{ csrf_token() }}"
# 然後每個請求新增 X-CSRFToken 頭部

# 全域性禁用csrf
WTF_CSRF_CHECK_DEFAULT = False

# 對一些檢視跳過csrf檢查
@csrf.exempt
@app.route('/foo', methods=('GET', 'POST'))
def my_handler():
    return 'ok'

參考

https://flask-wtf.readthedocs.io/en/stable/
http://www.pythondoc.com/flask-wtf/
https://www.cnblogs.com/sysnap/p/6568397.html # 表單驗證器的總結

flask外掛系列之Flask-WTF表單

安裝

簡單使用

flask_wtf定義欄位

表單物件

常用場景

參考

flask外掛系列之Flask-WTF表單

flask外掛系列之flask_uploads上傳檔案

Django系列之form渲染表單後css樣式丟失

Flask入門之flask-wtf表單處理

三十三、python學習之Flask框架(五)模板:WTF表單、CSRF跨站請求偽造、模板特有函式&變數

Flask-WTF表單的使用

flask的flask-wtf表單

Flask——WTF表單

Flask-wtf表單處理

Flask入門—Flask-WTF表單驗證

基於Flask框架搭建視訊網站的學習日誌（三）之原始web表單

Flask開發系列之初體驗

php 圖片上傳之利用form表單上傳

【ASP.NET MVC系列】淺談表單和HTML輔助方法

dwz問題之頁面提交表單，僅區域性重新整理table表格

React學習之旅----獲取表單輸入的值，雙向繫結

layui之獲取form表單的radio

演算法題系列之三 - 單鏈表反轉

系列之5-多入單出的一層神經網路能做什麼

Flask組件之Flask-session

flask外掛系列之Flask-WTF表單

安裝

簡單使用

flask_wtf定義欄位

表單物件

常用場景

參考

相關推薦