English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

WTF Flask

Um aspecto importante de uma aplicação web é fornecer uma interface para o usuário. O HTML fornece a etiqueta <form> para projetar uma interface. Pode usar os elementos do formulário apropriados, como entrada de texto, rádio, seleção, etc.

Os dados de entrada do usuário são enviados ao script do lado do servidor na forma de uma mensagem de solicitação HTTP por meio dos métodos GET ou POST.

O script do lado do servidor deve recriar os elementos do formulário a partir dos dados da solicitação HTTP. Portanto, os elementos do formulário devem ser definidos duas vezes. - Uma vez é HTML, outra é script do lado do servidor. Outra desvantagem de usar formulários HTML é que é difícil (se não impossível) apresentar elementos de formulário dinamicamente. O HTML em si não pode validar a entrada do usuário.

Este é o WTForms, um pacote conveniente para renderização e validação de formulários flexíveis. Flask-A extensão do WTF fornece uma interface simples para a biblioteca WTForms.

Usando Flask-WTF, pode definir campos de formulário em scripts Python e apresentá-los usando modelos HTML. Também pode aplicar validação aos campos do WTF.

Vamos ver como este HTML gerado dinamicamente funciona.

Primeiro, é necessário instalar o Flask-Extensão do WTF.

# Filename : example.py
# Copyright : 2020 By w3codebox
# Author by : pt.oldtoolbag.com
# Date : 2020-08-08
pip install flask-WTF

O pacote instalado contém uma classe Form, que deve ser usada como pai do formulário definido pelo usuário. O pacote WTforms contém definições de vários campos de formulário. A seguir, estão listados alguns campos de formulário padrão.

NúmeroCampo de formulário padrãoDescrição
1TextFieldRepresenta o elemento de formulário HTML <input type='text'>
2BooleanFieldRepresenta o elemento de formulário HTML <input type='checkbox'>
3DecimalFieldCampo de texto para exibir números decimais
4IntegerFieldCampo de texto para exibir números inteiros
5RadioFieldRepresenta o elemento de formulário HTML <input type='radio'>
6SelectFieldRepresenta o elemento de formulário de seleção
7TextAreaFieldRepresenta o elemento de formulário HTML <textarea>
8PasswordFieldRepresenta o elemento de formulário HTML <input type='password'>
9SubmitFieldRepresenta o elemento de formulário <input type='submit'>

Por exemplo, pode-se projetar um formulário contendo campos de texto, conforme mostrado a seguir -

# Filename : example.py
# Copyright : 2020 By w3codebox
# Author by : pt.oldtoolbag.com
# Date : 2020-08-08
from flask_wtf import Form
 from wtforms import TextField
 class ContactForm(Form):
     name = TextField("Nome do Aluno")

Além do campo name, um campo oculto de token CSRF também será criado automaticamente. Isso é para evitar ataques de falsificação de solicitações de site.

Ao renderizar, isso produzirá um script HTML equivalente, conforme mostrado a seguir.

# Filename : example.py
# Copyright : 2020 By w3codebox
# Author by : pt.oldtoolbag.com
# Date : 2020-08-08
<input id="csrf_token" name="csrf_token" type="hidden"> />
 <label for="name">Nome do Aluno</label><br>
 <input id="name" name="name" type="text" value=""> />

Classes de formulários definidas pelo usuário são usadas em aplicações Flask, e os formulários são apresentados em modelos.

# Filename : example.py
# Copyright : 2020 By w3codebox
# Author by : pt.oldtoolbag.com
# Date : 2020-08-08
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)

O pacote WTForms também contém classes de validador, que são muito úteis ao validar campos de formulários. A seguir está uma lista de validadores comuns.

NúmeroClasse de validadorDescrição
1DataRequiredVerificação se a barra de entrada está vazia
2E-mailVerificação se o texto no campo de entrada segue o convênio de ID de e-mail
3EndereçoIPVerificação do endereço IP no campo de entrada
4TamanhoVerificação da comprimento da string no campo de entrada dentro do intervalo especificado
5NumberRangeValidar um número no campo de entrada dentro de um intervalo específico
6URLValidar a URL inserida no campo de entrada

Aplicar a regra de validação 'DataRequired' ao campo name do formulário de contato.

# Filename : example.py
# Copyright : 2020 By w3codebox
# Author by : pt.oldtoolbag.com
# Date : 2020-08-08
nome = TextField("Nome do Estudante", [validators.Required("Por favor, insira seu nome.")])

A função validate() do objeto do formulário verifica os dados do formulário e lança um erro de validação quando falhar. As mensagens de erro são enviadas para o template. As mensagens de erro são apresentadas dinamicamente no template HTML.

# Filename : example.py
# Copyright : 2020 By w3codebox
# Author by : pt.oldtoolbag.com
# Date : 2020-08-08
{% for message in form.name.errors %}
    {{ message }}
 {% endfor %}

O seguinte exemplo demonstra o conceito apresentado acima. O código do formulário de contato é o seguinte ( forms.py)。

# Filename : example.py
# Copyright : 2020 By w3codebox
# Author by : pt.oldtoolbag.com
# Date : 2020-08-08
from flask_wtf import Form
 from wtforms import TextField, IntegerField, TextAreaField, SubmitField, RadioField, SelectField
 from wtforms import validators, ValidationError
 class ContactForm(Form):
     nome = TextField("Nome do Estudante", [validators.Required("Por favor, insira seu nome.")])
     Gênero = RadioField('Gênero', choices = [('M', 'Masculino'), ('F', 'Feminino')])
     Endereço = TextAreaField("Endereço")
     email = TextField("E-mail", [validators.Required("Por favor, insira seu endereço de e-mail.")],
       validators.Email("Por favor, insira seu endereço de e-mail.")])
     Idade = IntegerField("Idade")
     language = SelectField('Linguagem', choices = [('cpp', 'C',)++'), ('py', 'Python')])
     submit = SubmitField("Enviar")

O validador é aplicado aos campos de nome e e-mail. A seguir está apresentado o script do aplicativo Flask ( formexample.py)。

# Filename : example.py
# Copyright : 2020 By w3codebox
# Author by : pt.oldtoolbag.com
# Date : 2020-08-08
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)如下所示 -

# Filename : example.py
# Copyright : 2020 By w3codebox
# Author by : pt.oldtoolbag.com
# Date : 2020-08-08
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Flask示例</title>
 </head>
    <body>
      <h2 style = "text-align: center;">联系人表单</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>Itens de Preenchimento</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>

Execute no shell Python formexample.py,e acesse o URL => http://localhost:5000/contact 。 O formulário de contato será exibido conforme mostrado a seguir.

Se houver informações de erro, a página será conforme mostrado a seguir -

Se não houver erros, será apresentado success.htmlO conteúdo da página, conforme mostrado a seguir -