Flask 简明教程

Flask – WTF

Web 应用程序的基本方面之一是为用户提供用户界面。HTML 提供了一个 <form> 标记，用于设计界面。可以适当使用文本输入、单选按钮、选择等 Form’s 元素。

用户输入的数据通过 GET 或 POST 方法以 Http 请求消息的形式提交到服务器端脚本。

  1. 服务器端脚本必须从 http 请求数据中重新创建表单元素。因此实际上，表单元素必须定义两次——一次在 HTML 中，一次在服务器端脚本中。

  2. 使用 HTML 表单的另一个缺点是，很难（如果不是不可能的话）动态呈现表单元素。HTML 本身没有提供验证用户输入的方法。

这时 WTForms 派上用场，它是一个灵活的表单呈现和验证库。Flask-WTF 扩展提供了一个与 WTForms 库简单的界面。

使用 Flask-WTF ，我们可以在 Python 脚本中定义表单字段，并使用 HTML 模板呈现它们。还可以对 WTF 字段应用验证。

让我们看看此 HTML 的动态生成是如何运作的。

首先，需要安装 Flask-WTF 扩展。

pip install flask-WTF

安装的包包含一个 Form 类，必须将其用作用户定义表单的父元素。

WTforms 包含各种表单字段的定义。一些 Standard form fields 如下。

Sr.No

标准表单字段和说明

1

TextField 表示 <input type = 'text'>HTML 表单元素

2

BooleanField 表示 <input type = 'checkbox'> HTML 表单元素

3

带有小数点的数字显示文本字段

4

IntegerField TextField for displaying integer

5

RadioField 表示 <input type = 'radio'> HTML 表单元素

6

SelectField Represents select form element

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 令牌的隐藏字段。这是为了防止 Cross Site Request Forgery 攻击。

渲染时，这将生成如下所示的等效 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 包还包含验证器类。它可用于对表单字段应用验证。以下列表显示了常用的验证器。

Sr.No

Validators Class & Description

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() 函数验证表单数据，如果验证失败则抛出验证错误。将 Error 消息发送到模板。在HTML模板中，错误消息会动态呈现。

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

以下示例 демонстрирует介绍的概念。 Contact form 的设计如下 (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")

验证器适用于 Name 和 Email 字段。

以下是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 = "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中运行 formexample.py 并访问URL http://localhost:5000/contact 。 Contact 表单将按如下所示显示。

form example

如果有任何错误，页面将如下所示 −

form error page

如果没有错误，将呈现 ‘success.html’ 。

form success page