Flask-WTF與WTForms的用法詳解

前言

咱們在使用flask框架來搭建本身的博客，只要是設涉及到表單相關，必然會想起Flask-WTF與WTForms。對於flask初學者來講，比較容易混淆二者。今天想來一一解釋二者的用法。

Flask-WTF

基本瞭解

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

用法：

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：

<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"> .... </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

基本瞭解

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

用法：

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'} ) 

總結

其實flask表單這一部分咱們都是使用Flask-WTF與WTForms來進行實現，好比說作一下簡單的系統登陸界面、註冊界面等等，能夠利用它們來作一些小demo，你就能夠深刻理解它的原理而且能夠強化flask的基礎。若是不懂的，也但願你們能夠參考我最近作的開源項目SimpleBlog,裏面大量應用到Flask-WTF與WTForms。

參考連接：
1.https://wtforms.readthedocs.io/en/stable/
2.https://flask-wtf.readthedocs.io/en/stable/

做者：BourneKing 連接：https://www.jianshu.com/p/7e16877757f8 來源：簡書 著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。