zoukankan      html  css  js  c++  java
  • 表单 Flask-WTF

    1 配置

    可以使用Flask-WTF来处理web表单,在使用之前要先配置下,打开config.py,编辑添加如下内容

    WTF_CSRF_ENABLED = True
    SECRET_KEY = 'you-will-never-guess'

    WTF_CSRF_ENABLED设置为True主要是开启CSRF保护,SECRET_KEY是为了实现CSRF保护,Flask-WTF需要应用程序去配置一个加密密钥。Flask-WTF使用这个密钥去生成加密令牌用于验证请求表单数据的真实性,注:为了提高安全性,密钥应该存储在一个环境变量中,而不是嵌入到代码中。配置完成后要通知Flask去加载这个配置文件,编辑app/__init__.py,添加如下内容

    from flask import Flask
    
    app = Flask(__name__)
    app.config.from_object('config')
    
    from app import views

    2 表单类

    使用Flask-WTF时,每个web表单是由继承自 Form 类的子类来展现的。该类在表单中定义了一组表单域,每个都表示为一个对象。每个表单域都可以连接到一个或多个 validators ; validators 是一个用于检查用户提交的输入是否合法的函数,app/forms.py 专门用来存放表单类,用例

    from flask.ext.wtf import Form
    from wtforms import StringField, SubmitField 
    from wtforms.validators import Required
    
    class NameForm(Form):
        name = StringField('What is your name?', validators=[Required()]) 
        submit = SubmitField('Submit')

    示例中, NameForm 表单有一个 name 文本框和 submit 提交按钮。 StringField 类表示一个 type="text" 属性的 <input> 标签。 SubmitField 类表示一个 type="submit" 属性的 <input> 标签。表单域构造函数的第一个参数是一个 label ,在渲染表单到HTML时会使用。StringField 构造函数包含可选参数 validators ,它定义了一组检查来验证用户提交的数据。 Required() 验证确保提交的表单域不为空

    WTForms标准HTML表单域

    WTForms验证

    3 表单渲染模版

    假设视图函数传递一个参数名为 form 的NameForm 实例给模板,模板就会生成一个简单的HTML表单,如下所示:假设名字为nameform.html

    <form method="POST">
        { { form.name.label }} { { form.name() }} 
        { { form.submit() }}
    </form>

    当然,结果是什么都没有。为了改变表单的外观显示,任何发送给该表单域的参数会被转换为HTML表单域属性;例如,你可以给定表单域 id 或 class 属性,然后定义CSS样式:即使有HTML属性,努力用这种方式渲染表单是非常重要的,所以最好是尽可能的使用Bootstrap自带的一系列表单样式。Flask-Bootstrap使用Bootstrap的预定义表单样式来提供高级的帮助函数来渲染整个Flask-WTF表单,这些操作都只需要一个调用即可完成

    <form method="POST">
        { { form.name.label }} { { form.name(id='my-text-field') }} 
        { { form.submit() }}
    </form>
    ---完善 nameform.html

    <!-- extend from base layout -->

    {% extends "base.html" %}

    {% block content %}

      <h1>{{title}}</h1>

      <form action="" method="post" name="nameform">

          {{ form.hidden_tag() }}

          {{ form.name.label }} {{ form.name() }}

          {{ form.submit() }}

      </form>

    {% endblock %}

    4 视图函数使用表单

    from .forms import NameForm

    @app.route('/nameform', methods=['GET', 'POST'])

    def nameform():

        form = NameForm()

        """

        处理接收表格数据,Flask-WTF让这个工作变得简单,validate_on_submit

        处理了所有表格的基本工作,只需要判断然后直接引用数据即可

        调用validate_on_submit时,这个函数会尝试接收用户提交的所有数据,然后做下表格校验,

        如果一切校验都通过,意味着数据可以被合法安全处理,如果校验不通过会直接刷新停在原来页面

        那如何做错误信息提示呢?

        """

        if form.validate_on_submit():

            flash('%s' %(form.name.data))

            return redirect('/index')

       

        return render_template('nameform.html',

                               title='nameform',

                               form=form)

    效果

    5 出错提醒

    name再加个校验器,需要输入最少6个字符,最多35个字符

    class NameForm(Form):
        name = StringField('What is your name?', validators=[Required(), validators.Length(min=6, max=35)]) 
        submit = SubmitField('Submit')

    点击无反应,我们希望是能提示用户错误信息,在哪里加,在渲染的html模版里面,错误信息会存放到form.FieldName.errors里面,改进渲染模版

    <!-- extend from base layout -->

    {% extends "base.html" %}

    {% block content %}

      <h1>{{title}}</h1>

      <form action="" method="post" name="nameform">

          {{ form.hidden_tag() }}

          <p>

               {{ form.name.label }} {{ form.name() }}

               {% for error in form.name.errors %}

              <span style="color: red;">[{{ error }}]</span>

          {% endfor %}

               </p>

              

               <p>

               {{ form.submit() }}

               </p>

      </form>

    {% endblock %}

     
  • 相关阅读:
    Linux内存管理1---内存寻址
    UML和模式应用5:细化阶段(10)---UML交互图
    AT91RM9200---电源管理控制器(PMC)介绍
    AT91RM9200---定时器简介
    [转]指针大小是由谁决定的?
    UML和模式应用5:细化阶段(9)---迈向对象设计
    UML和模式应用5:细化阶段(8)---逻辑架构和UML包图
    UML和模式应用5:细化阶段(7)---从需求到设计迭代进化
    UML和模式应用5:细化阶段(6)---操作契约
    VxWorks软件开发项目实例完全解析1-VxWorks简介
  • 原文地址:https://www.cnblogs.com/sysnap/p/6568346.html
Copyright © 2011-2022 走看看