WTForms 是用于web开发的灵活的表单验证和呈现库，它可以与您选择的任何web框架和模板引擎一起工作，并支持数据验证、CSRF保护、国际化等，运用WTForms框架并配合Flask可实现一个带有基本表单验证功能的用户注册与登录页面，经过美化的页面可以直接应用到项目中。

  • WTForms 需要额外安装PIP包
  • pip install WTForms email_validator

实现用户注册页面

在templates目录下新建index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel='stylesheet' href="https://cdn.lyshark.com/javascript/bootstrap/3.3.7/css/bootstrap.min.css">

    <link href="https://cdn.lyshark.com/javascript/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <link href="https://cdn.lyshark.com/javascript/other/my_login.css" rel="stylesheet" type="text/css" />

</head>

<body>

    <div class="container">

        <div class="row">

            <div class="col-md-offset-3 col-md-6">

                <form action="/register" method="post" class="form-horizontal">

                    <span class="heading">用 户 注 册</span>

                    <div class="form-group">

                        {{ form.username }}

                        <i class="fa fa-user"></i>

                        <a href="/login" class="fa fa-question-circle"></a>

                    </div>

                    <div class="form-group">

                        {{ form.email }}

                        <i class="fa fa-envelope"></i>

                    </div>

                    <div class="form-group">

                        {{ form.password }}

                        <i class="fa fa-lock"></i>

                    </div>

                    <div class="form-group">

                        {{ form.RepeatPassword }}

                        <i class="fa fa-unlock-alt"></i>

                    </div>

                    {{ form.submit }}

                </form>

            </div>

        </div>

    </div>

</body>

</html>

Flask 后端部分使用如下代码:

from flask import Flask, render_template, request, redirect

from wtforms import Form,validators,widgets

from wtforms.fields import simple

app = Flask(import_name=__name__,

            static_url_path='/python',   # 配置静态文件的访问url前缀

            static_folder='static',      # 配置静态文件的文件夹

            template_folder='templates') # 配置模板文件的文件夹

class RegisterForm(Form):

    username = simple.StringField(

        #label='注册用户：',

        validators=[

            validators.DataRequired(message='用户名不能为空'),

            validators.Length(min=6, max=18, message='用户名长度必须大于%(min)d且小于%(max)d')

        ],

        widget=widgets.TextInput(),

        render_kw={'class': 'form-control',

                   "placeholder":"输入注册用户名"}

    )

    email = simple.StringField(

        #label='用户邮箱：',

        validators=[validators.DataRequired(message='邮箱不能为空'),validators.Email(message="邮箱格式输入有误")],

        render_kw={'class':'form-control',

                   "placeholder":"输入Email邮箱"}

    )

    password = simple.PasswordField(

        #label='用户密码：',

        validators=[

            validators.DataRequired(message='密码不能为空'),

            validators.Length(min=5, message='用户名长度必须大于%(min)d'),

            validators.Regexp(regex="[0-9a-zA-Z]{5,}",message='密码不允许使用特殊字符')

        ],

        widget=widgets.PasswordInput(),

        render_kw={'class': 'form-control',

                   "placeholder":"输入用户密码"}

    )

    RepeatPassword = simple.PasswordField(

        #label='重复密码：',

        validators=[

            validators.DataRequired(message='密码不能为空'),

            validators.Length(min=5, message='密码长度必须大于%(min)d'),

            validators.Regexp(regex="[0-9a-zA-Z]{5,}",message='密码不允许使用特殊字符'),

            validators.EqualTo("password",message="两次密码输入必须一致,龟孙")

        ],

        widget=widgets.PasswordInput(),

        render_kw={'class': 'form-control',

                   "placeholder":"再次输入密码"}

    )

    submit = simple.SubmitField(

        label="用 户 注 册",

        render_kw={ "class":"btn btn-success" }

    )

@app.route('/register', methods=['GET', 'POST'])

def Register():

    if request.method == 'GET':

        RetForm = RegisterForm()

        return render_template('index.html', form=RetForm)

    else:

        RetForm = RegisterForm(formdata=request.form)

        if RetForm.validate():

            print('接收到数据：', RetForm.data)

            return '''<script>alert('您的注册请求已提交!');</script>'''

        else:

            print(RetForm.errors)

        return render_template('index.html', form=RetForm)

if __name__ == '__main__':

    app.run(host="127.0.0.1", port=80, debug=False)

代码运行效果如下:

实现用户登录页面

在templates目录下新建index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel='stylesheet' href="https://cdn.lyshark.com/javascript/bootstrap/3.3.7/css/bootstrap.min.css">

    <link href="https://cdn.lyshark.com/javascript/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <link href="https://cdn.lyshark.com/javascript/other/my_login.css" rel="stylesheet" type="text/css" />

</head>

<body>

	<div class="container">

		<div class="row">

			<div class="col-md-offset-3 col-md-6">

				<form action="/login" method="post" class="form-horizontal">

					<span class="heading">用 户 登 录</span>

					<div class="form-group">

						{{ form.username }}

						<i class="fa fa-user"></i>

					</div>

					<div class="form-group help">

						{{ form.password }}

						<i class="fa fa-lock"></i>

						<a href="#" class="fa fa-question-circle"></a>

					</div>

					<div class="form-group">

						<button type="submit" class="btn btn-success">登 录 后 台</button>

					</div>

				</form>

			</div>

		</div>

	</div>

</body>

</html>

Flask 后端部分使用如下代码:

from flask import Flask, render_template, request, redirect

from wtforms import Form,validators,widgets

from wtforms.fields import simple,html5

app = Flask(import_name=__name__,

            static_url_path='/python',   # 配置静态文件的访问url前缀

            static_folder='static',      # 配置静态文件的文件夹

            template_folder='templates') # 配置模板文件的文件夹

class LoginForm(Form):

    username = simple.StringField(

        validators=[

            validators.DataRequired(message=''),

            validators.Length(min=4, max=15, message=''),

            validators.Regexp(regex="[0-9a-zA-Z]{4,15}", message='')

        ],

        widget=widgets.TextInput(),

        render_kw={"class":"form-control",

                   "placeholder":"请输入用户名或电子邮件"}

    )

    password = simple.PasswordField(

        validators=[

            validators.DataRequired(message=''),

            validators.Length(min=5, max=15,message=''),

            validators.Regexp(regex="[0-9a-zA-Z]{5,15}",message='')

        ],

        widget=widgets.PasswordInput(),

        render_kw={"class":"form-control",

                   "placeholder":"请输入密码"}

    )

@app.route("/login",methods=['GET','POST'])

def Login():

    if request.method == 'GET':

        RetForm = LoginForm()

        return render_template('index.html', form=RetForm)

    else:

        RetForm = LoginForm(formdata=request.form)

        if RetForm.validate():

            temp = RetForm.data

            print("接收到数据:",temp)

            return '''<script type="text/javascript">alert('登录完成!');</script>'''

        return render_template('index.html', form=RetForm)

if __name__ == '__main__':

    app.run(host="127.0.0.1", port=80, debug=False)

代码运行效果如下:

Flask 框架：运用WTForms实现用户注册的更多相关文章

  1. Flask框架 之 wtforms

    简介 WTForms是一个支持多个web框架的form组件,主要用于对用户请求数据进行验证. 作用 生成HTML标签 form表单验证 使用 - 用户登录示例- 用户注册示例- 数据库获取数据实时更新 ...

  2. flask框架----flask中的wtforms使用

    一.简单介绍flask中的wtforms WTForms是一个支持多个web框架的form组件,主要用于对用户请求数据进行验证. 安装: pip3 install wtforms 二.简单使用wtfo ...

  3. Flask框架 （四）—— 请求上下文源码分析、g对象、第三方插件（flask_session、flask_script、wtforms）、信号

    Flask框架 (四)—— 请求上下文源码分析.g对象.第三方插件(flask_session.flask_script.wtforms).信号 目录 请求上下文源码分析.g对象.第三方插件(flas ...

  4. Flask框架（2）--编写简单的用户注册--登录场景

    为了更好的理解web前后端的工作业务逻辑:本笔记记录用flask框架编写的一个最初级的代码实现简单的用户注册,登录场景: 初次进入首页,提示--游客,欢迎参观,有登录和注册选项, 登录成功后的用户,会 ...

  5. flask中的wtforms使用

    一.简单介绍flask中的wtforms WTForms是一个支持多个web框架的form组件,主要用于对用户请求数据进行验证. 安装: pip3 install wtforms 二.简单使用wtfo ...

  6. Flask学习【第7篇】：Flask中的wtforms使用

    简介flask中的wtforms WTForms是一个支持多个web框架的form组件,主要用于对用户请求数据进行验证. 安装 pip3 install wtforms 简单使用wtforms组件 用 ...

  7. Flask系列（七）Flask中的wtforms使用

    一.简单介绍flask中的wtforms WTForms是一个支持多个web框架的form组件,主要用于对用户请求数据进行验证. 安装: pip3 install wtforms 二.简单使用wtfo ...

  8. Flask【第7篇】：Flask中的wtforms使用

    flask中的wtforms使用 一.简单介绍flask中的wtforms WTForms是一个支持多个web框架的form组件,主要用于对用户请求数据进行验证. 安装: pip3 install w ...

  9. Flask框架知识点整合

    Flask 0.Flask简介 Flask是一个基于Python开发并且依赖jinja2模板和Werkzeug WSGI服务的一个微型框架,对于Werkzeug本质是Socket服务端,其用于接收ht ...

  10. Flask 框架入门

    Flask Flask是一个使用 Python 编写的轻量级 Web 应用框架.其 WSGI 工具箱采用 Werkzeug ,模板引擎则使用 Jinja2 . 安装 Flask 依赖两个外部库, We ...

随机推荐

  1. 【mongodb】pymongo使用

    pymongo基本使用 import pymongo from bson.objectid import ObjectId # 连接方式1 client = pymongo.MongoClient(h ...

  2. Codeforce 318A - Even Odds（数学水题）

    Being a nonconformist, Volodya is displeased with the current state of things, particularly with the ...

  3. Java ConcurrentHashMap 高并发安全实现原理解析

    本文首发于 vivo互联网技术 微信公众号链接:https://mp.weixin.qq.com/s/4sz6sTPvBigR_1g8piFxug作者:vivo 游戏技术团队 一.概述 Concurr ...

  4. 2023陕西省大学生信息安全竞赛web writeup

    前言 早写好了,忘发了,题目质量还行,够我坐大牢 ezpop 简单的反序列化,exp如下 <?php class night { public $night; } class day { pub ...

  5. ES5新增语法

    ES5中给我们新增了一些方法,可以很方便的操作数组或者字符串,这些方法主要包括:数组方法.字符串方法.对象方法. 1. 数组方法 迭代(遍历)方法:forEach() .map().filter(). ...

  6. C# 序列化器

    理论知识: 序列化是指将对象转换成字节流,从而存储对象或将对象传输到内存.数据库或文件的过程. 它的主要用途是保存对象的状态,以便能够在需要时重新创建对象. 反向过程称为"反序列化" ...

  7. df -h与df -i的区别

    一. df命令详解: linux中df命令的功能是用来检查linux服务器的文件系统的磁盘空间占用情况.可以利用该命令来获取硬盘被占用了多少空间,目前还剩下多少空间等信息 -a 全部文件系统列表 -h ...

  8. java基础-集合-day14

    目录 1. 数据结构 算法 2. 本章的重点 集合 3. collections 4. list 5. 泛型 6. 泛型通配符 7. linkedList 8. 模拟linkedList源码 --面试 ...

  9. 【动画进阶】神奇的 3D 卡片反光闪烁动效

    最近,有群里在群里发了这么一个非常有意思的卡片 Hover 动效,来源于此网站 -- key-drop,效果如下: 非常有意思酷炫的效果.而本文,我们不会完全还原此效果,而是基于此效果,尝试去制作这么 ...

  10. 05-逻辑仿真工具VCS-执行过程

    Verilog Simulation Event Queue 主要了解VCS是如何处理交给它的代码的 Verilog的仿真事件队列,介绍VCS如何处理交给它的代码.VCS是Synopsys公司的,支持 ...