Flask入门之flask-wtf表单处理

参考文章

1. 使用 WTForms 进行表单验证

 第11集

#Sample.py

# coding:utf-8
from flask import Flask,render_template,request
from flask_bootstrap import Bootstrap

app = Flask(__name__)
Bootstrap(app)

app.config.from_pyfile(‘config‘) #新建一个config的配置文件

@app.route(‘/login‘,methods=[‘POST‘,‘GET‘])
def login():
    from forms import LoginForm
    form = LoginForm()
    return render_template(‘login.html‘,title=u‘登录‘,form=form)

if __name__ == ‘__main__‘:
    app.run(debug=True)

 #login.html

{% extends ‘home.html‘ %}
{% block content %}
    <div class="page-header">
        <div class="container">
            <h1>{{ title }}</h1>
        </div>
    </div>
    <div class="container">
        <form method="POST">
            {{ form.username.label }}
            {{ form.username() }}
            {{ form.password.label }}
            {{ form.password() }}
            {{ form.submit() }}
        </form>
    </div>
{% endblock %}

#forms.py

#coding:utf-8
from flask.ext.wtf import Form
from wtforms import StringField,PasswordField,SubmitField
from wtforms.validators import DataRequired
class LoginForm(Form):
    username = StringField(label=u‘用户名‘,validators=[DataRequired()])
    password = PasswordField(label=u‘密码‘,validators=[DataRequired()])
    submit = SubmitField(label=u‘提交‘)

#homt.html

{% extends ‘bootstrap/base.html‘ %}
{% import ‘_macro.html‘ as ui %}

{% block title %}{{ title }}{% endblock %}

{% block head %}
    {{ super() }}
    {% include ‘includes/_head.html‘ %}
{% endblock %}

{% block styles %}
    {{ super() }}
    <link rel="stylesheet"
          href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/darkly/bootstrap.min.css">
{% endblock %}

#config

  防止CSRF

SECRET_KEY=‘hard to guess string‘

  效果如图

这里我们可能会觉得这个表单设计的很丑

前面我们学了,引用bootstrap样式,所以也可以将这个表单直接引用,方便快捷

只要改动#login.html的代码(红色代码)

{% extends ‘home.html‘ %}
{% import ‘bootstrap/wtf.html‘ as wtf %}
{% block content %}
    <div class="page-header">
        <div class="container">
            <h1>{{ title }}</h1>
        </div>
    </div>
    <div class="container">
        <form method="POST">
            {{ wtf.quick_form(form) }}
        </form>
    </div>
{% endblock %}

  效果好了很多

  如果我们想在登录后,提示一下‘登录成功’的信息条,怎么设置呢,这里要从flask导入flash(添加到上面代码)

from flask import flash

  然后再视图函数下填写(红色代码)

@app.route(‘/login‘,methods=[‘POST‘,‘GET‘])
def login():
    from forms import LoginForm
    form = LoginForm()
    flash(u‘登陆成功‘)
    return render_template(‘login.html‘,title=u‘登录‘,form=form)

  最后在#login.html中增加代码(红色代码)

{% extends ‘home.html‘ %}
{% import ‘bootstrap/wtf.html‘ as wtf %}
{% block content %}
    <div class="page-header">
        <div class="container">
            <h1>{{ title }}</h1>
        </div>
    </div>
    <div class="container">
        {% for message in get_flashed_messages() %}
            <div class="alert-info">{{ message }}</div>
        {% endfor %}
        <form method="POST">
            {{ wtf.quick_form(form) }}
        </form>
    </div>
{% endblock %}

  最后效果如图

时间: 2024-10-04 07:51:58

Flask入门之flask-wtf表单处理的相关文章

【flask】使用Flask-WTF处理表单

 我的理解是Flask-WTF与html文件的关系就如同SQLAlchemy与数据库之间的关系. 通过python Form类,生成html代码,并在html模板文件中通过{{}}变量的方式引用这些生成的html代码 好处就是可以使用python类管理html的表单,而不需要自己去敲html代码 flask的处理机制: 定义WTForms表单类 输出HTML代码 在模板中渲染表单 实例: basic.html <!DOCTYPE html> <html lang="en&quo

Bootstrap入门(五)表单

先引入本地的CSS文件 <link href="css/bootstrap.min.css" rel="stylesheet"> 一.内联表单 单独的表单控件会被自动赋予一些全局样式.所有设置了 .form-control 类的 <input>.<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;. 而内联表单,要为 <form> 元素添加 .form-inli

AngularJS快速入门指南13:表单

一个AngularJS表单是一组输入型控件的集合. HTML控件 HTML输入型标签标包括: input标签 select标签 button标签 textarea标签 HTML表单 HTML表单将各种HTML控件组合到一起. 一个AngularJS表单的例子 <div ng-app="myApp" ng-controller="formCtrl"> <form novalidate> First Name:<br> <inp

struts2入门之action获取表单提交数据

action获取表单提交数据,有三种方式: 1.根据ActionContext对象获取: 2.利用ServletActionContext类获取表单数据:(其实就是可以获取HttpServletRequest对象) 3.利用接口注入的方式获取表单数据:实现接口(ServletRequestAware) 其实以上三种方式都是action通过操作域对象来获取数据,和servlet中操作域对象有异曲同工之妙, I.通过ActionContext类获取表单提交数据,代码如下: 1 public clas

struts2入门之struts2获取表单数据

在上一篇博文中分享了action如何获取表单数据,在本篇博文中分享一下用struts2这个框架如何来获取表单数据. struts2获取表单数据可以分为三种方式: 1.属性封装 2.模型驱动封装 3.表达式封装 分别介绍以上三种方式: 属性封装的步骤:首先在action中定义成员变量,并写set方法(这里为了避免和后面的混淆,把get和set方法都写上得了),然后该action要访问的form表单中的属性值要和定义的成员变量名称一样,在action访问到jsp页面时,form表单中的数据都已经拿到

Codeigniter入门学习笔记14—表单的验证

很久很久以前学习Codeigniter的笔记记录,很随意,但都是自己记录的,希望对需要的人有所帮助. 本文使用word2013编辑并发布 Postbird | There I am , in the world more exciting! Postbird personal website : http://www.ptbird.cn 表单验证 1.add_user ????] 2.form_check() ???? 3. ? 1.加载 ????$this->load->library('f

jeecg入门操作—树型表单开发

树表类型表单 表单创建,基础配置如下: 1.设置表单类型为:单表; 2.是否树选择:是; 3.设置特殊字段:[树形表单父id][树开表单列] 结果测试 原文地址:https://www.cnblogs.com/dyh004/p/10703699.html

html入门(列表、表单、常用表单控件、浮动框架、iframe、 摘要与细节、度量标签)

一.列表 1.作用:默认显示方式为从上到下的显示数据 2.列表的组成 列表类型和列表项 3.列表的分类:有序列表   无序列表   自定义列表 无序列表语法为ul>li, 语法:ul代表列表,li代表列表项 有序列表语法为ol>li, 语法:ol代表列表,li代表列表项 自定义列表,用法: <dl> <dt>1</dt> <dd>1</dd> </dl> 语法: dl列表的类型 dt列表的标题 dd 列表项 二.表单 1.

Flask入门 表单Flask-wtf form原生 Bootstrap渲染(七)

(1) 原生的表单 模板页面,form表单form.html <form action="{{ url_for('/check/') }}" method='post'> <p>用户名: <input type='text' name='username'></p> <p>密码: <input type='password' name='userpass'></p> <p><input

【Flask】 WTForm表单编程

WTForm表单编程 在网页中,为了和用户进行信息交互总是不得不出现一些表单.flask设计了WTForm表单库来使flask可以更加简便地管理操作表单数据.WTForm中最重要的几个概念如下: Form类,开发者自定义的表单必须继承自Form类或者其子类.Form类最主要的功能是通过其所包含的Field类提供对表单内数据的快捷访问方式. 各种Field类,即字段.一般而言每个Field类都对应一个input的HTML标签.比如WTForm自带的一些Field类比如BooleanField就对应