Flask 表单以及表单验证

表单

说到表单,在HTML中表单的创建时通过<form>标签实现的,在<form>标签内部,字段通过使用<input>标签等定义。比如一个表单内部有用户名,密码框这些,都是通过<input><label>标签等实现的。

一个简单的表单:

在这里插入图片描述

<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>

将表单提交给服务端处理时,服务端需要验证表单中的字段的取值是否符合要求。

在 Python 的 Web 开发中,表单内部的字段标签之类的,就不再使用HTML标签来写了,而是通过python类实现。

WTForms在python中使用类定义表单,然后直接通过类定义生成对应的HTML代码,这种方式更加方便,而且使表单更易于重用。除非是非常简单的程序,或者想让表单的定义更加灵活,否则一般不会在模板中直接使用HTML代码写表单。

WTForms 和 Flask-WTF

WTForms 是一个灵活的表单验证和表单渲染的库,它的主要功能:

  • 验证表单中的字段的取值是否符合要求;
  • 渲染输出表单的 HTML 代码

WTForms 可以与任意的 Web 框架和模板引擎一起使用。 在 Flask 框架或者 Django 框架中,都可以使用 WTForms。

Flask-WTF 在 WTForms 的基础上提供了一些扩展,可以方便的在 Flask 框架中生成表单。

创建表单

下面直接用代码讲解如何创建表单。

首先,我们的目标是这样一个页面

在这里插入图片描述


一个简单的登录页面,让用户输入用户名,密码,同时对用户名和密码进行验证,验证成功就输出,验证不成功需要重新输入,并提示错误信息。

首先,这是一个表单,表单内有一些文本,有文本框,有登录按钮,这些都是通过python中的表单类创建的,使用的正是flask-wtf模块创建的。

先导入需要的模块

#导入表单类
from flask_wtf import FlaskForm
#导入字段类
from wtforms import StringField,SubmitField,PasswordField
#导入验证器类
from wtforms.validators import DataRequired,Length,Regexp
class LoginForm(FlaskForm):
    '''
    这些字段对象会被渲染为html标签
    实例化一个文本字段对象,设置参数
    label:这个值可以拿出来放在标签前面显示
    validators=[]验证器列表,实例化的验证器对象,里面又可以设置参数

    '''
    #用户名字段
    username = StringField(
        label='用户名',
        validators=[
            DataRequired(message='用户名不能为空'),
            Length(3,20,message='用户名长度在3-20个字符')
        ]
    )

    password = PasswordField(
        label='密码',
        validators=[
            DataRequired(message='密码不能为空'),
            Length(3,20,message='密码长度在3-20个字符'),
 			Regexp(r'^[a-z0-9A-Z]+$',message='密码只能有字母,数字,下划线组成')
        ]
    )

    submit = SubmitField(label='登录')

我们创建了一个类LoginForm,它是一个表单类,继承了FlaskForm,这个表单中包含一个用户名username字段,密码password字段,还有一个提交按钮submit,这三个字段作为了类LoginForm的三个属性。

表单字段

我们发现用户名,密码这些实际是文本框,既然不用HTML代码实现,那么怎么实现呢?

使用的就是WTForms中的各种字段类,比如这里:

username = StringField()

StringField()是WTForms 支持表单字段类,它表示文本字段,这样一个字段会被渲染为

<input id="username" name="username" type="text" value="">

注意:实例化对象的名称是username ,被渲染后的input标签中的idname属性值都叫username

WTForms 支持如下类型的表单字段:

在这里插入图片描述


这只是一部分,还有很多其他支持的字段。

接着看代码:

    username = StringField(
        label='用户名',
        validators=[
            DataRequired(message='用户名不能为空'),
            Length(3,20,message='用户名长度在3-20个字符')
        ]
    )

验证器

StringField类需要传递一些参数:

label='用户名' ,这个参数可以直接在模板页面中显示,使用form.username.label,把它放在文本框的前面,像下面这样:

在这里插入图片描述

validators=[ ] 这个参数表示对这个字段使用的验证器列表。验证器就是对这个字段使用那些验证,比如这里DataRequired,Length两个验证器类,同样验证器类需要实例化然后传入参数。比如:

 Length(3,20,message='用户名长度在3-20个字符')

限定长度在3-20字符,如果验证不通过,就弹出错误信息:message='用户名长度在6-20个字符'

验证器也有很多类型,常见的验证器类有:

在这里插入图片描述


还可以自定义验证器类等等。

我们创建了一个单独的文件loginform.py

from flask_wtf import FlaskForm
from wtforms import StringField,PasswordField,SubmitField
from wtforms.validators import DataRequired,Regexp,Length

class LoginForm(FlaskForm):
    #<input id="username1" maxlength="20" minlength="3" name="username1" required type="text" value="">
    username = StringField(
        label='用户名',
        validators=[
            DataRequired(message='用户名不能为空'),
            Length(3,20,message='用户名长度在3-20个字符')
        ]
    )

    password = PasswordField(
        label='密码',
        validators=[
            DataRequired(message='密码不能为空'),
            Length(3,20,message='密码长度在3-20个字符'),
            Regexp(r'^[a-z0-9A-Z]+$',message='密码只能有字母,数字,下划线组成')
        ]
    )

    submit = SubmitField(label='登录')

表单类创建好之后,可以做一个简单的测试:
把这个表单显示出来

首先,我们在app.py文件中:

from flask import Flask,render_template,request
from loginform import LoginForm

app = Flask(__name__)
app.config['SECRET_KEY'] = 'hard to guess string'

@app.route('/',methods=['GET','POST'])
def login():
    loginform = LoginForm()
    if request.method == 'GET':
        return render_template('login.html',form = loginform)

    return 'hello'

if __name__ == '__main__':
    app.run()
app.config['SECRET_KEY'] = 'hard to guess string'
用于防范 CSRF 攻击,具体的我也不清楚,就不再细说了,总之需要设置

接着,在根路由下/,有视图函数login,访问这个路由的方法可以是GET,或者POST。首先假设是GET,我们就需要把之前的表单渲染出来,具体的做法就是:

使用创建的表单类LoginForm实例化一个表单对象loginform ,如果请求方法是GET,就去渲染login.html,然后表单对象作为参数传递过去。所以我们还需要设计一下login.html文件。

login.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
</head>
<body>

<form action="{{ url_for('login') }}" method="post">
    <table>
        <tbody>
        <tr>
            <td>{{ form.username.label }}</td>
            <td>{{ form.username }}</td>
            <td>{% for err in form.username.errors %}
                {{ err }}
                {% endfor %}
            </td>
        <td>{{ form.test }}</td>
        </tr>
        <tr>
            <td>{{ form.password.label }}</td>
            <td>{{ form.password }}</td>
            <td>{% for err in form.password.errors %}
                {{ err }}
                {% endfor %}
            </td>
        </tr>
        <tr>
            <td>{{ form.submit }}</td>
        </tr>
        {{ form.hidden_tag() }}
        </tbody>
    </table>
</form>

</body>
</html>

这里使用了一个表格布局,然后表单的action="{{ url_for('login') }}" method="post",设置了表单的提交路径,以及提交方法。

    <td>{{ form.username.label }}</td>#拿到username的label值显示出来
    <td>{{ form.username }}</td>#显示username这个字段
    <td>{% for err in form.username.errors %}#这是错误信息,如果验证不通过会显示错误信息
        {{ err }}
        {% endfor %}
    </td>

最后,还要注意到: {{ form.hidden_tag() }}, 用于防范 CSRF 攻击,生成 <input id=“csrf_token”/> 标签。总之必须要加上,不加上,后面验证数据的时候会出问题。

接着,运行app.py,访问根路径/,则是GET方法访问,会渲染出login.html文件。

在这里插入图片描述

接着,我们需要实现,用户输入数据,我们进行验证,验证不成功就提示错误信息,验证成功就登录成功。

回到表单类中,我们可以发现使用的验证器有这几种:

在这里插入图片描述

其中,DataRequired,Length直接被渲染为HTML中input标签的属性:

maxlength="" minlength="" required

在这里插入图片描述


这时候验证就是在浏览器上完成的了,而不是在服务器。客户端方式可以实时动态的提示用户输入是否正确,只有用户输入正确后才会将表单数据发送给服务器。客户端验证可以增强用户体验,降低服务器负载。

参考书上说,Flask程序中使用WTForms实现的就是服务器验证,但是有些字段又会被渲染为HTML5的属性,所以也不全是服务器验证。

这就是浏览器给出的验证提示

在这里插入图片描述

但是正则验证器,确实是在服务端完成验证的

Regexp(r'^[a-z0-9A-Z]+$',message='密码只能有字母,数字,下划线组成')

那么怎么在服务器验证数据呢,首先,我们的数据会提交到/路径,使用的是POST方法。

表单类对象loginform,有一个验证方法,loginform.validate(),调用这个方法时,会去调用你每一个字段中使用的每一个验证器去验证数据,全部验证通过返回True,失败返回False。

@app.route('/',methods=['GET','POST'])
def login():
    loginform = LoginForm()
    if request.method == 'GET':
        return render_template('login.html',form = loginform)
    elif request.method == 'POST' and loginform.validate():
        return f'用户 {loginform.username.data}登录成功'
    else:
        return render_template('login.html',form = loginform)
  • 如果请求方法时GET,直接渲染表单
  • 如果请求方法时POST,并且
    loginform.validate()==True,表示验证通过,这时候我们返回登录成功,同时使用loginform.username.data可以拿到用户输入的用户名。
  • 否则,验证失败,再次渲染这个表单,注意:这时候,调用了validate()方法,返回False,产生了错误信息,错误信息在form.username.errors,是一个列表,这时候login.html中的错误信息列表就是有输出了。

    在这里插入图片描述

测试一下:我的密码字段设置了正则验证,只允许输入字母数字下划线,而且字符个数在3-20个。

首先,不填写字段,浏览器端会自动验证

在这里插入图片描述

输入正确格式的密码:

在这里插入图片描述

输入错误格式的密码:

在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


学习编程是顺着互联网的发展潮流,是一件好事。新手如何学习编程?其实不难,不过在学习编程之前你得先了解你的目的是什么?这个很重要,因为目的决定你的发展方向、决定你的发展速度。
IT行业是什么工作做什么?IT行业的工作有:产品策划类、页面设计类、前端与移动、开发与测试、营销推广类、数据运营类、运营维护类、游戏相关类等,根据不同的分类下面有细分了不同的岗位。
女生学Java好就业吗?女生适合学Java编程吗?目前有不少女生学习Java开发,但要结合自身的情况,先了解自己适不适合去学习Java,不要盲目的选择不适合自己的Java培训班进行学习。只要肯下功夫钻研,多看、多想、多练
Can’t connect to local MySQL server through socket \'/var/lib/mysql/mysql.sock问题 1.进入mysql路径
oracle基本命令 一、登录操作 1.管理员登录 # 管理员登录 sqlplus / as sysdba 2.普通用户登录
一、背景 因为项目中需要通北京网络,所以需要连vpn,但是服务器有时候会断掉,所以写个shell脚本每五分钟去判断是否连接,于是就有下面的shell脚本。
BETWEEN 操作符选取介于两个值之间的数据范围内的值。这些值可以是数值、文本或者日期。
假如你已经使用过苹果开发者中心上架app,你肯定知道在苹果开发者中心的web界面,无法直接提交ipa文件,而是需要使用第三方工具,将ipa文件上传到构建版本,开...
下面的 SQL 语句指定了两个别名,一个是 name 列的别名,一个是 country 列的别名。**提示:**如果列名称包含空格,要求使用双引号或方括号:
在使用H5混合开发的app打包后,需要将ipa文件上传到appstore进行发布,就需要去苹果开发者中心进行发布。​
+----+--------------+---------------------------+-------+---------+
数组的声明并不是声明一个个单独的变量,比如 number0、number1、...、number99,而是声明一个数组变量,比如 numbers,然后使用 nu...
第一步:到appuploader官网下载辅助工具和iCloud驱动,使用前面创建的AppID登录。
如需删除表中的列,请使用下面的语法(请注意,某些数据库系统不允许这种在数据库表中删除列的方式):
前不久在制作win11pe,制作了一版,1.26GB,太大了,不满意,想再裁剪下,发现这次dism mount正常,commit或discard巨慢,以前都很快...
赛门铁克各个版本概览:https://knowledge.broadcom.com/external/article?legacyId=tech163829
实测Python 3.6.6用pip 21.3.1,再高就报错了,Python 3.10.7用pip 22.3.1是可以的
Broadcom Corporation (博通公司,股票代号AVGO)是全球领先的有线和无线通信半导体公司。其产品实现向家庭、 办公室和移动环境以及在这些环境...
发现个问题,server2016上安装了c4d这些版本,低版本的正常显示窗格,但红色圈出的高版本c4d打开后不显示窗格,
TAT:https://cloud.tencent.com/document/product/1340