wtforms 使用

wtforms是一个表单模板库, 下面以修改密码表单为例简单说明其用法.
我们可以用python代码定义form的基本元素, 比如用户名/邮箱, 并给定各个元素的validation条件.

然后在render_template()方法中, 将python的form类传递给html模板. 在模板上, 需要有placeholder来接纳python传过来的form元素.

使用wtforms的好处是:
1. form验证可以使用python来做, 不必将验证代码放到javascript中.
2. 在python视图函数中, 可以很方便地获取表单元素, 比如使用form.username.data, 即可获取表单上的username值.
3. 可以简化html模板的设计. 采用Flask-Bootstrap 扩展或者使用一些jinja2 marco都能简化html代码.
4. 更重要的好处是, 将validation逻辑从表现层中解耦

使用wtforms碰到的问题:
1. 对于 SelectField, 在视图函数中, 对form对象设置了取值, 但是在页面展现时候, 并不能显示出来.  
2. 好像没有办法设置field为disable或readonly
3. 对于 SelectField, 文档中说可以在视图函数中动态设置 choices, 但我试验不行, 必须在 SelectField 构造的时候, 设置 choices
 
 
下面仅讲解wtforms和bootstrap的结合使用, 而不涉及wtforms的基本用法.

bear-z写的bootstrap的macro
http://bear-z.com/python/render-bootstrap-3-forms-with-wtforms-and-jinja/

wtforms和bootstrap结合使用的详解
http://pythonthusiast.pythonblogs.com/230_pythonthusiast/archive/1315_flask_biography_tutorial_part_vi__adding_sign_up_form_using_bootstrap_3_and_flask-wtf.html

Flask-Bootstrap的简单用法
1. 安装Flask-Bootstrap后, 将Flask-Bootstrap的bootstrap模板目录放在我们自己的templates目录下, 即形成一个二级子目录.
2. 将flask的app做封装
    from flask_bootstrap import Bootstrap
    Bootstrap(app)
3. 定义python的一个WTF form类, 比如 MyForm
4. 在flask的view函数中, 将MyForm实例传到模板html中,  即render_template(‘MyForm.html‘,form=MyForm())
5. 在MyForm.html模板中, 引入flask_bootstrap的wtf macro文件, 最简单的方法是wtf.quick_form(), 即可将 MyForm python类定义的所有元素渲染到html上.  
  {% import "bootstrap/wtf.html" as wtf %}
  ....
    <div>         
        {{ wtf.quick_form(form, id="myform", form_type="horizontal", horizontal_columns=(‘sm‘, 2, 5)) }}
        <!-- 上面horizontal_columns()后两个参数是用来标示每一行的label和textbox的宽度 -->
    </div>

Flask-Bootstrap的quick_form()生成的html往往只适用于简单的排版, 所以比较适合做demo. 即使直接用wtf.form_field()来渲染每个元素, 也没有办法指定css class, 灵活度不高. 不过, 我们可提取出Flask-Bootstrap生成的html样式, 做为下一步美化的基础.

bear-z写的bootstrap的macro, 和Flask-Bootstrap相比, 灵活度高一些, 可以通过class_参数为每个元素指定css class.
{% import "bootstrap/bearz_wtf.html" as wtf2 %}
{{ wtf2.render_field(form.email, label_visible=false, placeholder=‘userID‘, type=‘email‘,class_=‘col-md-8‘) }}

涉及到表单提交, flask视图函数其实都是一个样子. 先看请求类型, 如是POST, 验证form上的数据, 验证通过则更新, 不通过则返回到原来的Form. 如请求是GET, 则表明是新的请求, 初始化一个新的Form, 并做html渲染.

下面是一个更新密码的示例.

##############################################
#flask view 模块
##############################################
@mod.route(‘/MyApp/updatePwd/‘, methods=[‘GET‘,‘POST‘])
def udpatePwd():
    if request.method == ‘POST‘:  # construct WTF form object based on request data
        form = UserPwdForm(request.form)
        if form.validate():       # WTForm validation OK
            user=User.getUser(form.EMPNO.data)
            aborted=False
            if user is None:
                aborted=True
                form.EMPNO.errors.append(‘This EmpNo does not exist.‘)
            if not aborted and not User.checkUserPwd(form.EMPNO.data, form.PWD.data):
                aborted=True    
                form.PWD.errors.append(‘Old password is not correct.‘)
            if aborted:
                return _navigateToUpdatePwd(form)  # return the page with error message
            else:  # all validation OK
                try:
                    User.updatePassword(form.EMPNO.data,form.NewPWD.data)
                    return _navigateSuccessfulPage()
                except Exception as e:
                    return _navigateErrorPage(logger=current_app.logger, exception=e)
        else:  # validation failed
            return _navigateToUpdatePwd(form)         
        
    else:  # GET request
        return _navigateToUpdatePwd(UserPwdForm())
 
 
def _navigateToUpdatePwd(form):
    return render_template("form_update_pwd.html",  
                            form=form,
                            )

def _navigateSuccessfulPage():
    return render_template("form_successful.html",  
                            )      
                   
                   
def _navigateErrorPage(logger, friendlyErrorMsg=None, exception=None):
    if exception:
        msg=‘%s‘%exception
        tracebackInfo=traceback.format_exc()
        tracebackInfo=tracebackInfo.replace(chr(10), ‘<br>‘)
        tracebackInfo=tracebackInfo.replace(chr(13), ‘<br>‘)

if friendlyErrorMsg:
        msg=friendlyErrorMsg
        
    logger.error(msg)    
    if exception:
        logger.exception(exception)  
   
    #output the msg highlighted in danger  
    flash(msg, ‘error‘)
    return render_template("form_error.html",  
                            tracebackInfo=tracebackInfo
                            )

##############################################                            
#flask form 模块
##############################################
from flask_wtf import Form
from wtforms import StringField, PasswordField, SubmitField
from wtforms.validators import DataRequired, EqualTo, Length, InputRequired
from wtforms.fields.simple import PasswordField

class UserPwdForm(Form):
    
    EMPNO=StringField(‘Emp No‘,validators=[
        DataRequired(‘Please enter Emp No‘),
        Length(min = 1, max = 20,message=‘length must between 1 and 20‘)
    ])
    
    PWD=PasswordField(‘Old password‘,validators=[
        DataRequired(‘Please enter old password‘),
    ])    
        
    NewPWD=PasswordField(‘New password‘,validators=[
        DataRequired(‘Please enter new password‘),
    ])    
    
    RptNewPWD=PasswordField(‘Confirm new password‘,validators=[
        DataRequired(‘Please confirm new password again‘),
        EqualTo(‘NewPWD‘,‘Password must be match‘)
    ])        
        
    submit = SubmitField(‘Submit‘)

##############################################    
# html文件 form_update_pwd.html    
##############################################
{% if not is_xhr|default(false) %}{% extends "report_base.html" %}{% endif %}
{% import "bootstrap/wtf.html" as wtf %}
{% import "bootstrap/bearz_wtf.html" as wtf2 %}

{% block other_head_javascript %}
    <script src="/static/js/jquery.min.js"></script>
{% endblock %}

{% block content %}
 
      <h1>Update password</h1>
     
       <div>         
           {{ wtf.quick_form(form, id="FormUpdatePwd", form_type="horizontal", horizontal_columns=(‘sm‘, 2, 5)) }}
       </div>
 
        
{% endblock %}

##############################################
# html文件 form_successful.html
##############################################
{% if not is_xhr|default(false) %}{% extends "report_base.html" %}{% endif %}
{% import "bootstrap/wtf.html" as wtf %}
{% import "bootstrap/bearz_wtf.html" as wtf2 %}

{% block other_head_javascript %}
    <script src="/static/js/jquery.min.js"></script>
{% endblock %}

{% block content %}
 
<h1>Updated successfully.</h1>
        
{% endblock %}

<div class="row">
     {% with messages = get_flashed_messages(with_categories=true) %}
         {% if messages %}
             {% for category, message in messages %}
                 {% if category == "error" %}                             
                     <div class="alert alert-danger">{{ message }}</div>
                 {% else %}   
                     <div class="alert alert-{{category}}">{{ message }}</div>
                 {% endif %}
             {% endfor %}
         {% endif %}
     {% endwith %}
</div> <!-- /row -->

理解session和cookie
http://lucindabfls.blog.163.com/blog/static/1247404702010326103548751/
http://hqhou.blog.163.com/blog/static/852039352013431033327/

时间： 2024-08-02 02:51:44

wtforms 使用的相关文章

flask-admin章节二：wtforms的使用以及在数据库场景中使用QuerySelectField代替SelectField

概述 flask admin可以支持自定义视图,对于涉及到比较复杂的视图可以选择继承flask_admin.BaseView来定义自己期待的结构. 自定义的视图的每个函数可以使用flask_admin.expose 语法糖来装饰,从而可以定义自己期待接收的HTTP方法和对外的URL. flask admin的良好封装,使得自定义视图非常的方便. 自定义视图中少不了涉及各种表单操作,对于不是很习惯写前端的朋友来说肯定压力比较大.不过,懒人自有懒的办法,可以选择 wtforms package提供的

WTForms介绍

WTforms作用:当网站中需要用到表单时,WTForms变得很有效.应该把表单定义为类,作为单独的一个模块. 表单类: class wtforms.form.Form: 创建表单: 创建表单时,通常是创建一个Form的子类,表单的中的字段作为类的属性,如: from wtforms import Form, BooleanField, TextField,PasswordField,validators class RegistrationForm(Form):     username = 

flask-admin章节五：wtforms FormField超级炫酷使用

1. 概述 查看wtforms代码树fields目录的core.py,会发现在文件开头有这样的语句: __all__ = ( 'BooleanField', 'DecimalField', 'DateField', 'DateTimeField', 'FieldList', 'FloatField', 'FormField', 'IntegerField', 'RadioField', 'SelectField', 'SelectMultipleField', 'StringField', )

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

表单中的文件上传 基本的表单渲染,表单类设置等等就不多说了,参看另一个文章即可.但是那篇文章里没有提到对于FileField,也就是上传文件的表单字段是如何处理,后端又是如何实现接受上传过来的文件的.因为看到了一篇很好的文章[https://zhuanlan.zhihu.com/p/23731819?refer=flask],所以我决定仔细学习一下.下面将按照那篇文章的脉络,由简至繁地说明表单中文件上传的办法. ■ 利用Flask原生的机制进行文件上传 首先在前端肯定有一个带有文件上传功能的表单

基于wtforms源码实现自定义form组件

from flask import Flask,Markup,render_template,request,redirect from wtforms.form import Form from wtforms.fields import core from wtforms import widgets #插件 class Widget(object): pass class TextInput(): def __call__(self, *args, **kwargs): return "&

Flask之wtforms源码分析

一.wtforms源码流程 1.实例化流程分析 1 # 源码流程 2 1. 执行type的 __call__ 方法,读取字段到静态字段 cls._unbound_fields 中: meta类读取到cls._wtforms_meta中 3 2. 执行构造方法 4 5 a. 循环cls._unbound_fields中的字段,并执行字段的bind方法,然后将返回值添加到 self._fields[name] 中. 6 即: 7 _fields = { 8 name: wtforms.fields.

85、flask之wtforms

本篇导航: wtforms组件的使用 自定义From组件 一.wtforms组件的使用 1.flask中的wtforms WTForms是一个支持多个web框架的form组件,主要用于对用户请求数据进行验证. 安装: pip3 install wtforms 2.wtforms组件的使用之登录验证 1)图示 2)manage.py from flask import Flask,render_template,request,redirect from wtforms.fields import

python之路_flask框架_flask-session组件、信号及wtforms组件

一.flask-session组件 我们知道,在flask的内置session中,是存到加密cookie中.但是我们怎样么才可以将session在服务器也保存呢?之前我们也说过,自定义的session可以将键值对保存在内存中,但是想要实现在服务端永久的保存起来,我们就可以利用flask-session组件.利用此组件可以将session保存在redis.文件memcache等,如下列出主要的使用配置. 1.redis保存 from flask import Flask,session from

WTForms组件

WTForms组件 WTForms是一个支持多个web框架的form组件,主要用于对用户请求数据进行验证. 安装 pip3 install wtforms 使用,登录实例: from flask import Flask, render_template, request, redirect from wtforms import Form from wtforms.fields import core from wtforms.fields import html5 from wtforms.