Flask 表單操作庫 flask_WTF flask_WTForms

一、安裝 flask_WTF 0.14.X 

flask_WTF 英文文檔          flask_WTF 中文文檔0.12        Flask表單驗證組件WTForms

Flask-WTF是集成WTForms，並帶有 csrf 令牌的安全表單和全局的 csrf 保護的功能。每次我們在建立表單所創建的類都是繼承與flask_wtf中的FlaskForm，而FlaskForm是繼承WTForms中forms。

pip install flask_WTF

二、基本用法：

1.創建基礎表單

例如，form.py:

class LoginForm(FlaskForm):
    username = StringField()
    password = PasswordField()
    remember_me = BooleanField(label='Keep me logged in')

2.CSRF保護

任何使用FlaskForm創建的表單發送請求，都會有CSRF的全部保護，在對應的template中HTML渲染表單時，可以加入form.csrf_token：

app.config['SECRET_KEY'] = 'ABC'  # 指定CSRF驗證字段

<form method="post">
    {{ form.csrf_token }}
</form>

但是如果模板中沒有表單，則可以使用一個隱藏的input標籤加入csrf_token。

<form method="post">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
</form>

3.驗證表單

在視圖處理程序中驗證請求:
view.py

def login():
    form = LoginForm()
    if form.validate_on_submit():
        return redirect('/success')
    return render_template('login.html', form=form)

使用 validate_on_submit 來檢查是否是一個 POST 請求並且請求是否有效。

4.文件上傳

Flask-WTF 提供 FileField 來處理文件上傳，它在表單提交後，自動從 flask.request.files 中抽取數據。FileField 的 data 屬性是一個 Werkzeug FileStorage 實例。

from werkzeug import secure_filename
from flask_wtf.file import FileField

class PhotoForm(Form):
    photo = FileField('Your photo')

@app.route('/upload/', methods=('GET', 'POST'))
def upload():
    form = PhotoForm()
    if form.validate_on_submit():
        filename = secure_filename(form.photo.data.filename)
        form.photo.data.save('uploads/' + filename)
    else:
        filename = None
    return render_template('upload.html', form=form, filename=filename)

注意：在 HTML 表單的 enctype 設置成 multipart/form-data，如下:

<form action="/upload/" method="POST" enctype="multipart/form-data">
    {# 把定義的表單字段寫入到html中 #}
    {{ form.username }}
    {{ form.password }}
</form>

5.驗證碼

Flask-WTF 通過 RecaptchaField 也提供對驗證碼的支持:

from flask_wtf import Form, RecaptchaField
from wtforms import TextField

class SignupForm(Form):
    username = TextField('Username')
    recaptcha = RecaptchaField()

還需要配置一下信息：

字段	配置
RECAPTCHA_PUBLIC_KEY	必須 公鑰
RECAPTCHA_PRIVATE_KEY	必須 私鑰
RECAPTCHA_API_SERVER	可選 驗證碼 API 服務器
RECAPTCHA_PARAMETERS	可選 一個 JavaScript（api.js）參數的字典
RECAPTCHA_DATA_ATTRS	可選 一個數據屬性項列表 https://developers.google.com/recaptcha/docs/display

三、WTForms

3.1、基本瞭解

WTForms是一個Flask集成的框架，或者是說庫。用於處理瀏覽器表單提交的數據。它在Flask-WTF 的基礎上擴展並添加了一些隨手即得的精巧的幫助函數，這些函數將會使在 Flask 裏使用表單更加有趣。

3.2、用法：

1.field字段

WTForms支持HTML字段：

字段類型	說明
StringField	文本字段， 相當於type類型爲text的input標籤
TextAreaField	多行文本字段
PasswordField	密碼文本字段
HiddenField	隱藏文本字段
DateField	文本字段， 值爲datetime.date格式
DateTimeField	文本字段， 值爲datetime.datetime格式
IntegerField	文本字段， 值爲整數
DecimalField	文本字段， 值爲decimal.Decimal
FloatField	文本字段， 值爲浮點數
BooleanField	複選框， 值爲True 和 False
RadioField	一組單選框
SelectField	下拉列表
SelectMultipleField	下拉列表， 可選擇多個值
FileField	文件上傳字段
SubmitField	表單提交按鈕
FormFiled	把表單作爲字段嵌入另一個表單
FieldList	子組指定類型的字段

2.Validators驗證器

WTForms可以支持很多表單的驗證函數：

驗證函數	說明
Email	驗證是電子郵件地址
EqualTo	比較兩個字段的值； 常用於要求輸入兩次密鑰進行確認的情況
IPAddress	驗證IPv4網絡地址
Length	驗證輸入字符串的長度
NumberRange	驗證輸入的值在數字範圍內
Optional	無輸入值時跳過其它驗證函數
DataRequired	確保字段中有數據
Regexp	使用正則表達式驗證輸入值
URL	驗證url
AnyOf	確保輸入值在可選值列表中
NoneOf	確保輸入值不在可選列表中

3.自定義Validators驗證器

第一種：in_line Validator（內聯驗證器）
也就是自定義一個驗證函數，在定義表單類的時候，在對應的字段中加入該函數進行認證。下面的my_length_check函數就是用於判name字段長度不能超過50.

def my_length_check(form, field):
    if len(field.data) > 50:
        raise ValidationError('Field must be less than 50 characters')

class MyForm(Form):
    name = StringField('Name', [InputRequired(), my_length_check])

第二種：通用且可重用的驗證函數
一般是以validate開頭，加上下劃線再加上對應的field字段（validate_filed），瀏覽器在提交表單數據時，會自動識別對應字段所有的驗證器，然後執行驗證器進行判斷。

class RegistrationForm(FlaskForm):
    email = StringField(
        'Email', 
        validators=[
            DataRequired(), 
            Length(1, 60), 
            Email()
        ]
    )
    username = StringField(
        'Username', 
        validators=[
            DataRequired(), 
            Length(1, 60),
            Regexp(
                '^[A-Za-z][A-Za-z0-9_.]*$', 
                0, 
                'username must have only letters, numbers dots or underscores'
            )
        ]
    )
    password = PasswordField(
        'Password', 
        validators=[
            DataRequired(), 
            EqualTo(
                'password2', 
                message='password must match'
            )
        ]
    )
    password2 = PasswordField(
        'Confirm password', 
        validators=[
            DataRequired()
        ]
    )

    def validate_email(self, field):
        if User.objects.filter(email=field.data).count() > 0:
            raise ValidationError('Email already registered')

    def validate_username(self, field):
        if User.objects.filter(username=field.data).count() > 0:
            raise ValidationError('Username has exist')

第三種：比較高級的validators

class Length(object):
    def __init__(self, min=-1, max=-1, message=None):
        self.min = min
        self.max = max
        if not message:
            message = u'Field must be between %i and %i characters long.' % (min, max)
        self.message = message

    def __call__(self, form, field):
        l = field.data and len(field.data) or 0
        if l < self.min or self.max != -1 and l > self.max:
            raise ValidationError(self.message)

length = Length

4.Widget組件

下面可以以登錄界面爲實例：
login.py

#!/usr/bin/env python
# -*- coding:utf-8 -*-
from flask import Flask, render_template, request, redirect
from wtforms import Form
from wtforms import validators
from wtforms import widgets

class LoginForm(Form):
    name = simple.StringField(
        label='用戶名',
        validators=[
            validators.DataRequired(message='用戶名不能爲空.'),
        ],
        widget=widgets.TextInput(),
        render_kw={'class': 'form-control'}
    )
    pwd = simple.PasswordField(
        label='密碼',
        validators=[
            validators.DataRequired(message='密碼不能爲空.'),
        ],
        widget=widgets.PasswordInput(),
        render_kw={'class': 'form-control'}
    )

四、常用方法

# form對象，Movie創建的表單類
form = Movie()

# 獲取form表單提交過來的數據（元組）
data = form.data

# 設置單個form字段信息：form.字段名.data = '內容'
form.star.data = 'Hello word!'

# 獲取上傳文件信息：form.字段名.data.filename
logo = form.url.data.filename

# 保存表單上傳內容到文件夾：form.字段名.data.save(保存路徑,保存文件)
form.logo.data.save(app.config['UP_DIR'],url)