上一节:
下一节:

  Flask – WTF

  • 简述

    Web 应用程序的基本方面之一是为用户呈现用户界面。HTML 提供了一个<form>标签，用于设计界面。Form’s可以适当使用文本输入、单选、选择等元素。
    用户输入的数据通过 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包包含各种表单字段的定义。一些Standard form fields下面列出。
    序号 标准表单字段 & 描述
    1
    TextField
    表示 <input type = 'text'> HTML 表单元素
    2
    BooleanField
    表示 <input type = 'checkbox'> HTML 表单元素
    3
    DecimalField
    用于显示带小数的数字的文本字段
    4
    IntegerField
    用于显示整数的 TextField
    5
    RadioField
    表示 <input type = 'radio'> HTML 表单元素
    6
    SelectField
    表示选择表单元素
    7
    TextAreaField
    表示 <testarea> 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 包还包含验证器类。在将验证应用于表单字段时很有用。以下列表显示了常用的验证器。
    序号 Validators Class & Description
    1
    DataRequired
    检查输入字段是否为空
    2
    Email
    检查字段中的文本是否遵循电子邮件 ID 约定
    3
    IPAddress
    验证输入字段中的 IP 地址
    4
    Length
    验证输入字段中的字符串长度是否在给定范围内
    5
    NumberRange
    验证给定范围内输入字段中的数字
    6
    URL
    验证输入字段中输入的 URL
    我们现在申请‘DataRequired’的验证规则name联系表格中的字段。 
    
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>
    跑步formexample.py在 Python shell 中并访问 URLhttp://localhost:5000/contact. 这Contact将显示如下所示的表格。
    表单示例
    如果有任何错误，页面将如下所示 -
    表单错误页面
    如果没有错误，‘success.html’将被渲染。
    表单成功页面
上一节:
下一节: