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 %}

     
  • 相关阅读:
    Java实现 蓝桥杯VIP 算法训练 传球游戏
    Java实现 蓝桥杯VIP 算法训练 Hanoi问题
    Java实现 蓝桥杯VIP 算法训练 蜜蜂飞舞
    Java实现 蓝桥杯VIP 算法训练 奇偶判断
    Java实现 蓝桥杯VIP 算法训练 传球游戏
    Java实现 蓝桥杯VIP 算法训练 Hanoi问题
    Java实现 蓝桥杯VIP 算法训练 Hanoi问题
    Java实现 蓝桥杯VIP 算法训练 蜜蜂飞舞
    Java实现 蓝桥杯VIP 算法训练 蜜蜂飞舞
    Qt: 访问容器(三种方法,加上for循环就四种了)good
  • 原文地址:https://www.cnblogs.com/sysnap/p/6568346.html
Copyright © 2011-2022 走看看