web表单(1)--表单类&将表单渲染为HTML&在视图函数中处理表单

本文介绍了如何使用Flask-WTF创建表单类,将表单渲染成HTML并处理表单提交。表单字段通过验证函数确保数据有效,视图函数处理GET和POST请求,对用户输入进行响应。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.表单类

使用Flask-WTF时,每个web表单都由继承自Form的类表示。这个类定义表单中的一组字段,每个字段都用对象表示。字段对象可以附属一个或多个验证函数。验证函数用来验证用户所提交的数据是否符合要求。

hello.py:定义表单类

from flask_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')
 

StringField类表示属性为 type="text" 的 <input>元素。它的构造函数中的可选参数validators指定一个由验证函数组成的列表,在用户提交数据前验证其数据是否符合规范。

Required()验证函数:确保提交的字段不为空。

SubmitField类表示属性为 type="submit" 的 <input>元素。


2.把表单渲染成HTML

表单字段在模板中调用就会被渲染成HTML。条件允许情况下最好能使用Bootstrap中的表单样式。Flask-Bootstrap提供了一个辅助函数,可以一次调用从而渲染整个Flask-WTF表单。例:

{% import "bootstrap/wtf.html" as wtf %}
{{ wtf.quick_form(form) }}

bootstrap/wtf.html文件中定义了一个使用Bootstrap渲染Flask-WTF表单对象的辅助函数。wtf.quick_form()函数的参数为Flask-WTF表单对象。

 完整模板:

templates/index.html:使用Flask-WTF和Flask-Bootstrap渲染表单


{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}

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

{% block page_content %}
    <div class="page-header">
        <h1>Hello, {% if name %}{{ name }}{% else %}Stranger{% endif %}</h1>
    </div>
    {{ wtf.quick_form(form) }}
{% endblock %}

模板内容有两部分。第一部分时页面头部,显示欢迎信息。第二部分使用wtf.quick_form()函数来渲染NameForm对象。

3.在视图函数中处理表单

在hello.py中,视图函数index()不仅要渲染表单,还要接收表单中的数据。完整的hello.py函数如下:

hello.py:

from flask import Flask
from flask import render_template
from flask_wtf import Form
from wtforms import StringField, SubmitField
from wtforms.validators import Required
from flask_bootstrap import Bootstrap

app = Flask(__name__)
bootstrap = Bootstrap(app)
app.config['SECRET_KEY'] = 'yangdidi'

class NameForm(Form):
    name = StringField('What is your name ?',validators=[Required()])
    submit = SubmitField('Submit')

@app.route("/", methods=['GET', 'POST'])
def index():
    name = None
    form = NameForm()
    if form.validate_on_submit():
        name = form.name.data
        form.name.data = ''
    return render_template('index.html',form=form, name=name)

app.run(debug=True)

app.route()修饰器中method参数作用:在URL映射中把这个视图函数注册为GET和POST请求的处理程序。默认为GET请求的处理程序。

GET请求没有主体,提交的数据以查询字符串的形式附加到URL中,可以在浏览器的地址栏中看到,所以通常提交表单都是用POST请求处理。

视图函数中用name变量来存放表单中输入的有效名字,form来表示创建的NameForm类实例(表示表单)。提交表单后,若数据可以通过所有验证函数的验证,则返回True,

否则返回False。这个返回值决定重新渲染表单还是处理表单提交的数据。

当用户第一次访问程序时,服务器会收到一个没有表单数据的GET请求,所以验证函数validate_on_submit()将返回False,if语句不执行,通过渲染模板处理请求,并传入表单

对象和值为None的name变量作为参数,用户此时会看到浏览器显示了一个表单。如图所示:



用户提交表单后,服务器收到一个包含数据的POST请求,验证函数进行验证,若名字不为空,则通过验证,返回True。用户输入的名字可通过字段的data属性获得。

在if语句中,把名字赋值给变量name,然后再把data属性设置为空字符串,用来清空表单字段。最后调用render_template()函数渲染模板,这次name中的值不为空,所以

会显示一个针对用户的欢迎消息。如图所示:








评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值