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.

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.

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 -