Flask-WTF表單

Web表單

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

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

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

WTForms支持的HTML標準字段

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

WTForms經常使用驗證函數

驗證函數	說明
DataRequired	確保字段中有數據
EqualTo	比較兩個字段的值，經常使用於比較兩次密碼輸入
Length	驗證輸入的字符串長度
NumberRange	驗證輸入的值在數字範圍內
URL	驗證URL
AnyOf	驗證輸入值在可選列表中
NoneOf	驗證輸入值不在可選列表中

使用 Flask-WTF 須要配置參數 SECRET_KEY。

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

代碼驗證

使用 html 自帶的表單

• 建立模板文件 login.html，在其中直接寫form表單：

<form method="post"> <label>用戶名：</label><input type="text" name="username" placeholder="請輸入用戶名"><br/> <label>密碼：</label><input type="password" name="password" placeholder="請輸入密碼"><br/> <label>確認密碼：</label><input type="password" name="password2" placeholder="請輸入確認密碼"><br/> <input type="submit" value="註冊"> </form> {% for message in get_flashed_messages() %} {{ message }} {% endfor %} 

• 視圖函數中獲取表單數據驗證登陸邏輯：

@app.route('/demo1', methods=["get", "post"]) def demo1(): if request.method == "POST": # 取到表單中提交上來的三個參數 username = request.form.get("username") password = request.form.get("password") password2 = request.form.get("password2") if not all([username, password, password2]): # 向前端界面彈出一條提示(閃現消息) flash("參數不足") elif password != password2: flash("兩次密碼不一致") else: # 僞裝作註冊操做 print(username, password, password2) return "success" return render_template('temp_register.html') 

使用 Flask-WTF 實現表單

• 配置參數，關閉 CSRF 校驗

app.config['WTF_CSRF_ENABLED'] = False 

CSRF:跨站請求僞造，後續會講到

模板頁面：

<form method="post"> {{ form.username.label }} {{ form.username }}<br/> {{ form.password.label }} {{ form.password }}<br/> {{ form.password2.label }} {{ form.password2 }}<br/> {{ form.submit }} </form> 

視圖函數：

from flask import Flask,render_template, flash #導入wtf擴展的表單類 from flask_wtf import FlaskForm #導入自定義表單須要的字段 from wtforms import SubmitField,StringField,PasswordField #導入wtf擴展提供的表單驗證器 from wtforms.validators import DataRequired,EqualTo app = Flask(__name__) app.config['SECRET_KEY']='SECRET_KEY' #自定義表單類，文本字段、密碼字段、提交按鈕 class RegisterForm(FlaskForm): username = StringField("用戶名：", validators=[DataRequired("請輸入用戶名")], render_kw={"placeholder": "請輸入用戶名"}) password = PasswordField("密碼：", validators=[DataRequired("請輸入密碼")]) password2 = PasswordField("確認密碼：", validators=[DataRequired("請輸入確認密碼"), EqualTo("password", "兩次密碼不一致")]) submit = SubmitField("註冊") #定義根路由視圖函數，生成表單對象，獲取表單數據，進行表單數據驗證 @app.route('/demo2', methods=["get", "post"]) def demo2(): register_form = RegisterForm() # 驗證表單 if register_form.validate_on_submit(): # 若是代碼能走到這個地方，那麼就代碼表單中全部的數據都能驗證成功 username = request.form.get("username") password = request.form.get("password") password2 = request.form.get("password2") # 僞裝作註冊操做 print(username, password, password2) return "success" else: if request.method == "POST": flash("參數有誤或者不完整") return render_template('temp_register.html', form=register_form) if __name__ == '__main__': app.run(debug=True)