Flask – WTF

Web 應用的一個重要方面是為使用者呈現使用者介面。HTML 提供了一個<form>標籤，用於設計介面。可以適當地使用表單元素，例如文字輸入、單選按鈕、下拉列表等。

使用者輸入的資料透過 GET 或 POST 方法以 HTTP 請求訊息的形式提交到伺服器端指令碼。

伺服器端指令碼必須從 HTTP 請求資料中重新建立表單元素。因此，實際上，表單元素必須定義兩次——一次在 HTML 中，一次在伺服器端指令碼中。
使用 HTML 表單的另一個缺點是難以（如果不是不可能的話）動態呈現表單元素。HTML 本身不提供驗證使用者輸入的方法。

這就是靈活的表單、渲染和驗證庫WTForms派上用場的地方。Flask-WTF 擴充套件為此WTForms庫提供了一個簡單的介面。

使用Flask-WTF，我們可以在 Python 指令碼中定義表單欄位，並使用 HTML 模板呈現它們。也可以對WTF欄位應用驗證。

讓我們看看這個 HTML 動態生成的機制是如何工作的。

首先，需要安裝 Flask-WTF 擴充套件。

pip install flask-WTF

已安裝的包包含一個Form類，該類必須用作使用者定義表單的父類。

WTforms包包含各種表單欄位的定義。下面列出了一些標準表單欄位。

序號	標準表單欄位和描述
1	TextField 表示<input type = 'text'> HTML 表單元素
2	BooleanField 表示<input type = 'checkbox'> HTML 表單元素
3	DecimalField 用於顯示帶有小數的數字的文字欄位
4	IntegerField 用於顯示整數的文字欄位
5	RadioField 表示<input type = 'radio'> HTML 表單元素
6	SelectField 表示選擇表單元素
7	TextAreaField 表示<textarea> html 表單元素
8	PasswordField 表示<input type = 'password'> HTML 表單元素
9	SubmitField 表示<input type = 'submit'> 表單元素

例如，包含文字欄位的表單可以設計如下：

from flask_wtf import Form
from wtforms import TextField

class ContactForm(Form):
   name = TextField("Name Of Student")

除了“name”欄位外，還會自動建立一個用於 CSRF 令牌的隱藏欄位。這是為了防止跨站點請求偽造攻擊。

渲染後，這將生成如下所示的等效 HTML 指令碼。

<input id = "csrf_token" name = "csrf_token" type = "hidden" />
<label for = "name">Name Of Student</label><br>
<input id = "name" name = "name" type = "text" value = "" />

使用者定義的表單類用於 Flask 應用程式中，並使用模板呈現表單。

from flask import Flask, render_template
from forms import ContactForm
app = Flask(__name__)
app.secret_key = 'development key'

@app.route('/contact')
def contact():
   form = ContactForm()
   return render_template('contact.html', form = form)

if __name__ == '__main__':
   app.run(debug = True)

WTForms 包還包含驗證器類。它可用於對錶單欄位應用驗證。以下列表顯示了常用的驗證器。

序號	驗證器類和描述
1	DataRequired 檢查輸入欄位是否為空
2	Email 檢查欄位中的文字是否符合電子郵件 ID 約定
3	IPAddress 驗證輸入欄位中的 IP 地址
4	Length 驗證輸入欄位中字串的長度是否在給定範圍內
5	NumberRange 驗證輸入欄位中數字是否在給定範圍內
6	URL 驗證輸入欄位中輸入的 URL

我們現在將為聯絡表單中的name欄位應用“DataRequired”驗證規則。

name = TextField("Name Of Student",[validators.Required("Please enter your name.")])

表單物件的validate()函式驗證表單資料，如果驗證失敗則丟擲驗證錯誤。錯誤訊息被髮送到模板。在 HTML 模板中，錯誤訊息是動態呈現的。

{% for message in form.name.errors %}
   {{ message }}
{% endfor %}

以下示例演示了上面給出的概念。聯絡表單的設計如下所示(forms.py)。

from flask_wtf import Form
from wtforms import TextField, IntegerField, TextAreaField, SubmitField, RadioField,
   SelectField

from wtforms import validators, ValidationError

class ContactForm(Form):
   name = TextField("Name Of Student",[validators.Required("Please enter 
      your name.")])
   Gender = RadioField('Gender', choices = [('M','Male'),('F','Female')])
   Address = TextAreaField("Address")
   
   email = TextField("Email",[validators.Required("Please enter your email address."),
      validators.Email("Please enter your email address.")])
   
   Age = IntegerField("age")
   language = SelectField('Languages', choices = [('cpp', 'C++'), 
      ('py', 'Python')])
   submit = SubmitField("Send")

驗證器應用於姓名和電子郵件欄位。

以下是 Flask 應用程式指令碼(formexample.py)。

from flask import Flask, render_template, request, flash
from forms import ContactForm
app = Flask(__name__)
app.secret_key = 'development key'

@app.route('/contact', methods = ['GET', 'POST'])
def contact():
   form = ContactForm()
   
   if request.method == 'POST':
      if form.validate() == False:
         flash('All fields are required.')
         return render_template('contact.html', form = form)
      else:
         return render_template('success.html')
      elif request.method == 'GET':
         return render_template('contact.html', form = form)

if __name__ == '__main__':
   app.run(debug = True)

模板指令碼(contact.html)如下：

<!doctype html>
<html>
   <body>
      <h2 style = "text-align: center;">Contact Form</h2>
		
      {% for message in form.name.errors %}
         <div>{{ message }}</div>
      {% endfor %}
      
      {% for message in form.email.errors %}
         <div>{{ message }}</div>
      {% endfor %}
      
      <form action = "https://:5000/contact" method = post>
         <fieldset>
            <legend>Contact Form</legend>
            {{ form.hidden_tag() }}
            
            <div style = font-size:20px; font-weight:bold; margin-left:150px;>
               {{ form.name.label }}<br>
               {{ form.name }}
               <br>
               
               {{ form.Gender.label }} {{ form.Gender }}
               {{ form.Address.label }}<br>
               {{ form.Address }}
               <br>
               
               {{ form.email.label }}<br>
               {{ form.email }}
               <br>
               
               {{ form.Age.label }}<br>
               {{ form.Age }}
               <br>
               
               {{ form.language.label }}<br>
               {{ form.language }}
               <br>
               {{ form.submit }}
            </div>
            
         </fieldset>
      </form>
   </body>
</html>

在 Python shell 中執行formexample.py並訪問 URL https://:5000/contact。將顯示如下所示的聯絡表單。

如果有任何錯誤，頁面將如下所示：

如果沒有錯誤，將呈現“success.html”。

列印頁面