Flask - WTF界面

Flask - WTF界面 首页 / Flask入门教程 / Flask - WTF界面

Web应用程序是为用户提供用户界面,HTML提供了<form>标签,该标签用于设计界面 可以适当使用表单的元素,例如文本输入(input),单选(radop)

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

  • 服务器端脚本必须根据http请求数据重新创建表单元素。

  • 使用HTML表单的另一个缺点是很难动态呈现表单元素, HTML本身无法提供验证用户输入的方法。

在这里,方便使用 WTForms。 Flask-WTF扩展程序与此 WTForms 库提供了一个简单的接口。

使用 Flask-WTF ,无涯教程可以在Python脚本中定义表单字段,并使用HTML模板呈现它们,也可以将验证应用于 WTF 字段。

看看动态生成HTML是如何工作的。

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

pip install flask-WTF

安装的软件包包含一个 Form 类,该类必须用作用户定义表单的父级。

WTforms 软件包包含各种表单字段的定义。下面列出了一些标准表单字段。

Sr.NoStandard Form Fields & Remark
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令牌的隐藏字段。这是为了防止跨站点请求伪造攻击。

渲染后,将生成等效的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.NoValidators Class & Remark
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()函数会验证表单数据,如果验证失败,则会抛出验证错误。 错误消息将发送到模板。在HTML模板中,错误消息是动态呈现的。

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

下面的示例演示了上面给出的概念。 联系表单的设计在(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

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

赵成的运维体系管理课 -〔赵成〕

硅谷产品实战36讲 -〔曲晓音〕

MySQL实战45讲 -〔林晓斌〕

TensorFlow快速入门与实战 -〔彭靖田〕

性能工程高手课 -〔庄振运〕

职场求生攻略 -〔臧萌〕

Linux内核技术实战课 -〔邵亚方〕

如何落地业务建模 -〔徐昊〕

云时代的JVM原理与实战 -〔康杨〕

好记忆不如烂笔头。留下您的足迹吧 :)