Web应用程序的一个重要方面是为用户提供一个用户界面。HTML提供了一个

标签，用于设计一个接口。一个Form 元素，例如文本输入，单选框等可以适当地使用。

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

  • 服务器端脚本必须从http请求数据重新创建表单元素。所以实际上，表单元素必须被定义两次 - 一次是HTML，一次是服务器端脚本。

  • 使用HTML表单的另一个缺点是很难（如果不是不可能）动态地呈现表单元素。HTML本身无法验证用户的输入。

这就是 WTForms ，一个灵活的表单，渲染和验证库来得方便的地方。Flask-WTF扩展为这个 WTForms 库提供了一个简单的接口。

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

让我们看看这个动态生成的HTML如何工作。

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

  1. pip install flask-WTF

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

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

序号 标准表格字段和说明
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'>表单元素

例如，可以设计一个包含文本字段的表单，如下所示 -

  1. from flask_wtf import Form
  2. from wtforms import TextField
  3.  
  4. class ContactForm(Form):
  5.    name = TextField("Name Of Student")

除了 'name' 字段之外，还会自动创建一个CSRF令牌的隐藏字段。这是为了防止 跨站请求伪造 攻击。

渲染时，这将产生一个等效的HTML脚本，如下所示。

  1. <input id = "csrf_token" name = "csrf_token" type = "hidden" />
  2. <label for = "name">Name Of Student</label><br>
  3. <input id = "name" name = "name" type = "text" value = "" />

用户定义的表单类在Flask应用程序中使用，表单使用模板呈现。

  1. from flask import Flask, render_template
  2. from forms import ContactForm
  3. app = Flask(__name__)
  4. app.secret_key = 'development key'
  5.  
  6. @app.route('/contact')
  7. def contact():
  8.    form = ContactForm()
  9.    return render_template('contact.html', form = form)
  10.  
  11. if __name__ == '__main__':
  12.    app.run(debug = True)

WTForms包也包含验证器类。在验证表单域时非常有用。以下列表显示了常用的验证器。

Sr.No 验证器类和描述
1 DataRequired 检查输入栏是否为空
2 Email 检查字段中的文本是否遵循电子邮件ID约定
3 IPAddress 验证输入字段中的IP地址
4 Length 验证输入字段中字符串的长度是否在给定范围内
5 NumberRange 在给定范围内的输入字段中验证一个数字
6 URL 验证输入字段中输入的URL

现在我们将以联系表格的形式为 名称 字段应用 'DataRequired' 验证规则。 **

  1. name = TextField("Name Of Student",[validators.Required("Please enter your name.")])

表单对象的 validate（） 函数验证表单数据，并在验证失败时抛出验证错误。该 错误 消息被发送到模板。在HTML模板中，错误消息是动态呈现的。

  1. {% for message in form.name.errors %}
  2.    {{ message }}
  3. {% endfor %}

以下示例演示了上面给出的概念。 Contact form 的设计如下 （forms.py） 。

  1. from flask_wtf import Form
  2. from wtforms import TextField, IntegerField, TextAreaField, SubmitField, RadioField,
  3.    SelectField
  4.  
  5. from wtforms import validators, ValidationError
  6.  
  7. class ContactForm(Form):
  8.    name = TextField("Name Of Student",[validators.Required("Please enter
  9.       your name.")])
  10.    Gender = RadioField('Gender', choices = [('M','Male'),('F','Female')])
  11.    Address = TextAreaField("Address")
  12.  
  13.    email = TextField("Email",[validators.Required("Please enter your email address."),
  14.       validators.Email("Please enter your email address.")])
  15.  
  16.    Age = IntegerField("age")
  17.    language = SelectField('Languages', choices = [('cpp', 'C++'),
  18.       ('py', 'Python')])
  19.    submit = SubmitField("Send")

验证器应用于 名称 和 电子邮件 字段。

下面给出的是Flask应用程序脚本 （formexample.py） 。

  1. from flask import Flask, render_template, request, flash
  2. from forms import ContactForm
  3. app = Flask(__name__)
  4. app.secret_key = 'development key'
  5.  
  6. @app.route('/contact', methods = ['GET', 'POST'])
  7. def contact():
  8.    form = ContactForm()
  9.  
  10.    if request.method == 'POST':
  11.       if form.validate() == False:
  12.          flash('All fields are required.')
  13.          return render_template('contact.html', form = form)
  14.       else:
  15.          return render_template('success.html')
  16.       elif request.method == 'GET':
  17.          return render_template('contact.html', form = form)
  18.  
  19. if __name__ == '__main__':
  20.    app.run(debug = True)

模板的脚本 （contact.html） 如下所示 -

  1. <!doctype html>
  2. <html>
  3.    <body>
  4.  
  5.       <h2 style = "text-align: center;">Contact Form</h2>
  6.  
  7.       {% for message in form.name.errors %}
  8.          <div>{{ message }}</div>
  9.       {% endfor %}
  10.  
  11.       {% for message in form.email.errors %}
  12.          <div>{{ message }}</div>
  13.       {% endfor %}
  14.  
  15.       <form action = "http://localhost:5000/contact" method = post>
  16.          <fieldset>
  17.             <legend>Contact Form</legend>
  18.             {{ form.hidden_tag() }}
  19.  
  20.             <div style = font-size:20px; font-weight:bold; margin-left:150px;>
  21.                {{ form.name.label }}<br>
  22.                {{ form.name }}
  23.                <br>
  24.  
  25.                {{ form.Gender.label }} {{ form.Gender }}
  26.                {{ form.Address.label }}<br>
  27.                {{ form.Address }}
  28.                <br>
  29.  
  30.                {{ form.email.label }}<br>
  31.                {{ form.email }}
  32.                <br>
  33.  
  34.                {{ form.Age.label }}<br>
  35.                {{ form.Age }}
  36.                <br>
  37.  
  38.                {{ form.language.label }}<br>
  39.                {{ form.language }}
  40.                <br>
  41.                {{ form.submit }}
  42.             </div>
  43.  
  44.          </fieldset>
  45.       </form>
  46.  
  47.    </body>
  48. </html>

flask-wtf使用的更多相关文章

  1. Flask - WTF和WTForms创建表单

    目录 Flask - WTF和WTForms创建表单 一. Flask-WTF 1.创建基础表单 2.CSRF保护 3.验证表单 4.文件上传 5.验证码 二. WTForms 1. field字段 ...

  2. 【Flask】 结合wtforms的文件上传表单

    表单中的文件上传 基本的表单渲染,表单类设置等等就不多说了,参看另一个文章即可.但是那篇文章里没有提到对于FileField,也就是上传文件的表单字段是如何处理,后端又是如何实现接受上传过来的文件的. ...

  3. Flask 入门（第一篇）

    1. 认识 Flask Flask 是一个微型 Web 框架,依赖于 jinjia2 模板系统和 Werkzeug WSGI(本质为 Socket 服务端) 服务,默认情况不支持数据库抽象层.表单验证 ...

  4. 用 Flask 来写个轻博客 (13) — M(V)C_WTForms 服务端表单检验

    目录 目录 前文列表 WTForms WTF 的基础使用 常用的字段类型 fieldsDateField fieldsIntegerField fieldsFloatField fieldsStrin ...

  5. flask修改flask_wtf使其支持json数据的validation验证

    flask默认是前后端不分离策略,前端通过flask+wtf表单来传递post,put...等数据. 现在前后端分离是趋势,那么对flask进行一定的修改,变为前后端分离,在前端页面中请求后端,那么请 ...

  6. Flask Jinja2 知识点

    Jinja2模板引擎使用以下分隔符从HTML转义. {% ... %}用于语句 {{ ... }}用于表达式可以打印到模板输出 {# ... #}用于未包含在模板输出中的注释 # ... ##用于行语 ...

  7. python flask框架详解

    Flask是一个Python编写的Web 微框架,让我们可以使用Python语言快速实现一个网站或Web服务.本文参考自Flask官方文档, 英文不好的同学也可以参考中文文档 1.安装flask pi ...

  8. 不管你是否已经准备面试, 这45道Python面试题都对你非常有帮助!（mark！）

    1)什么是Python?使用Python有什么好处? Python是一种编程语言,包含对象,模块,线程,异常和自动内存管理.蟒蛇的好处在于它简单易用,可移植,可扩展,内置数据结构,并且它是一个开源的. ...

  9. Python面试应急5分钟！

    ​ 不论你是初入江湖,还是江湖老手,只要你想给自己一个定位那就少不了面试!面试的重要性相信大家都知道把,这就是我们常说的“第一印象”,给大家说一下我的面试心得把,面试前的紧张是要的,因为这能让你充分准 ...

  10. python 全栈之路

    目录 Python 全栈之路 一. Python 1. Python基础知识部分 2. Python -函数 3. Python - 模块 4. Python - 面对对象 5. Python - 文 ...

随机推荐

  1. Date 对象 定时器

    日期对象 Date 概述:date是表示日期时间的对象,主要的方法是获取时间和设置日期时间. date声明 使用new Date声明 有4种方式 1.不设参数 是获取当前的本地时间 var date ...

  2. LOJ数列分块入门九题（中）

    #6281. 数列分块入门 5 - 题目 - LibreOJ (loj.ac) 区间开方,区间求和题. 显然,针对区间维护开方操作很难做到,于是考虑其值的性质,显然,int范围内的值最多开方6次就会变 ...

  3. git commit --amend适用场景详解

    适用场景: 场景1.本地开发代码已提交,提交后发现这次提交的代码有问题,或者漏提交了一些文件,此时,希望达到以下目的: ①修改有问题的代码. ②补足漏提交的文件(一般是新增的文件没有git add . ...

  4. springboot配置类@ConfigurationProperties报错Not registered via @EnableConfigurationProperties or marked as Spring component

    添加一个@Component可以解决此问题,只有这个组件是容器中的组件,才能使用容器提供的@ConfigurationProperties功能.

  5. BubbleSort，冒泡排序，C++非递归和递归实现

    1 // g++ bubble_sort.cc -Wall -O3 && ./a.exe 2 3 4 #include <iostream> 5 #include < ...

  6. 安装 TensorFlow 参考过的资料

    anaconda 的新环境创建 https://blog.csdn.net/yandajiangjun/article/details/102615912

  7. windows环境下本地项目（或gitlab上拉取项目）在Jenkins上自动打包部署 超超超详细！！！！！

    一.环境准备 1.下载jdk,官网:http://www.oracle.com/ 2.下载Jenkins,官网:https://www.jenkins.io/ 3.下载Tomcat,官网:http:/ ...

  8. promise一脸懵逼...

    // 要求:封装一个方法,能根据路径读取文件,并把内容返回 const fs=require('fs') const path=require('path') 1. 普通读取文件的方式 1 const ...

  9. k8s configmap 配置分离

    ConfigMap ConfigMap用于保存配置珊数据的键值对,可以用来保存单个属性,也可以用来保存配置文件.一张图解释 上图就是整个ConfigMap的生命周期以及使用方式, ConfigMap的 ...

  10. java的死锁与解决方法

    一.什么是死锁? 死锁是指两个或两个以上的进程在执行过程中,由于竞争资源或者由于彼此通信而造成的一种阻塞的现象,若无外力作用,它们都将无限等待. 二.产生死锁的原因与四个条件 2.1 死锁原因 竞争资 ...