Flask-WTF表單

Web表單

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

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

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

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。web

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

代碼驗證

使用 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)
相關文章
相關標籤/搜索