閱讀(26.4k) 書簽贊(3) 我要糾錯(cuò)

Flask WTF

2023-01-30 15:41 更新

Web應(yīng)用程序的一個(gè)重要方面是為用戶提供用戶界面。HTML提供了一個(gè)<form>標(biāo)簽，用于設(shè)計(jì)界面。

可以適當(dāng)?shù)厥褂?strong>Form（表單）元素，例如文本輸入，單選按鈕，選擇等。

用戶輸入的數(shù)據(jù)以Http請(qǐng)求消息的形式通過GET或POST方法提交給服務(wù)器端腳本。

服務(wù)器端腳本必須從http請(qǐng)求數(shù)據(jù)重新創(chuàng)建表單元素。因此，實(shí)際上，表單元素必須定義兩次 - 一次在HTML中，另一次在服務(wù)器端腳本中。
使用HTML表單的另一個(gè)缺點(diǎn)是很難（如果不是不可能的話）動(dòng)態(tài)呈現(xiàn)表單元素。HTML本身無法驗(yàn)證用戶的輸入。

這就是WTForms的作用，一個(gè)靈活的表單，渲染和驗(yàn)證庫(kù)，能夠方便使用。

Flask-WTF擴(kuò)展為這個(gè)WTForms庫(kù)提供了一個(gè)簡(jiǎn)單的接口。

使用Flask-WTF，我們可以在Python腳本中定義表單字段，并使用HTML模板進(jìn)行渲染。還可以將驗(yàn)證應(yīng)用于WTF字段。

讓我們看看這種動(dòng)態(tài)生成的HTML是如何工作的。

首先，需要安裝Flask-WTF擴(kuò)展。

pip install flask-WTF

已安裝的軟件包包含一個(gè)Form類，該類必須用作用戶定義表單的父級(jí)。

WTforms包中包含各種表單字段的定義。下面列出了一些標(biāo)準(zhǔn)表單字段。

序號(hào)	標(biāo)準(zhǔn)表單字段與描述
1	TextField 表示<input type ='text'> HTML表單元素
2	BooleanField 表示<input type ='checkbox'> HTML表單元素
3	DecimalField 用于顯示帶小數(shù)的數(shù)字的文本字段
4	IntegerField 用于顯示整數(shù)的文本字段
5	RadioField 表示<input type = 'radio'> HTML表單元素
6	SelectField 表示選擇表單元素
7	TextAreaField 表示<textarea> HTML表單元素
8	PasswordField 表示<input type = 'password'> HTML表單元素
9	SubmitField 表示<input type = 'submit'>表單元素

例如，包含文本字段的表單可以設(shè)計(jì)如下：

from flask_wtf import Form
from wtforms import TextField

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

除了'name'字段，還會(huì)自動(dòng)創(chuàng)建CSRF令牌的隱藏字段。這是為了防止Cross Site Request Forgery（跨站請(qǐng)求偽造）攻擊。

渲染時(shí)，這將導(dǎo)致等效的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應(yīng)用程序中使用用戶定義的表單類，并使用模板呈現(xiàn)表單。

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包也包含驗(yàn)證器類。它對(duì)表單字段應(yīng)用驗(yàn)證很有用。以下列表顯示了常用的驗(yàn)證器。

序號(hào)	驗(yàn)證器類與描述
1	DataRequired 檢查輸入字段是否為空
2	Email 檢查字段中的文本是否遵循電子郵件ID約定
3	IPAddress 在輸入字段中驗(yàn)證IP地址
4	Length 驗(yàn)證輸入字段中的字符串的長(zhǎng)度是否在給定范圍內(nèi)
5	NumberRange 驗(yàn)證給定范圍內(nèi)輸入字段中的數(shù)字
6	URL 驗(yàn)證在輸入字段中輸入的URL

現(xiàn)在，我們將對(duì)聯(lián)系表單中的name字段應(yīng)用'DataRequired'驗(yàn)證規(guī)則。

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

如果驗(yàn)證失敗，表單對(duì)象的validate()函數(shù)將驗(yàn)證表單數(shù)據(jù)并拋出驗(yàn)證錯(cuò)誤。Error消息將發(fā)送到模板。在HTML模板中，動(dòng)態(tài)呈現(xiàn)error消息。

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

以下示例演示了上面給出的概念。Contact表單的設(shè)計(jì)如下（forms.py）。

from flask_wtf import FlaskForm
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&plus;&plus;'), 
      ('py', 'Python')])
   submit = SubmitField("Send")

驗(yàn)證器應(yīng)用于Name 和Email字段。

下面給出了Flask應(yīng)用程序腳本（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 %}
     
      
      <form action = "http://localhost: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中運(yùn)行formexample.py，訪問URL http://localhost:5000/contact。顯示Contact表單將如下所示。

Form Example