Flask 框架：运用WTForms实现用户注册
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实现用户注册的更多相关文章
- Flask框架 之 wtforms
简介 WTForms是一个支持多个web框架的form组件,主要用于对用户请求数据进行验证. 作用 生成HTML标签 form表单验证 使用 - 用户登录示例- 用户注册示例- 数据库获取数据实时更新 ...
- flask框架----flask中的wtforms使用
一.简单介绍flask中的wtforms WTForms是一个支持多个web框架的form组件,主要用于对用户请求数据进行验证. 安装: pip3 install wtforms 二.简单使用wtfo ...
- Flask框架 （四）—— 请求上下文源码分析、g对象、第三方插件（flask_session、flask_script、wtforms）、信号
Flask框架 (四)—— 请求上下文源码分析.g对象.第三方插件(flask_session.flask_script.wtforms).信号 目录 请求上下文源码分析.g对象.第三方插件(flas ...
- Flask框架（2）--编写简单的用户注册--登录场景
为了更好的理解web前后端的工作业务逻辑:本笔记记录用flask框架编写的一个最初级的代码实现简单的用户注册,登录场景: 初次进入首页,提示--游客,欢迎参观,有登录和注册选项, 登录成功后的用户,会 ...
- flask中的wtforms使用
一.简单介绍flask中的wtforms WTForms是一个支持多个web框架的form组件,主要用于对用户请求数据进行验证. 安装: pip3 install wtforms 二.简单使用wtfo ...
- Flask学习【第7篇】：Flask中的wtforms使用
简介flask中的wtforms WTForms是一个支持多个web框架的form组件,主要用于对用户请求数据进行验证. 安装 pip3 install wtforms 简单使用wtforms组件 用 ...
- Flask系列（七）Flask中的wtforms使用
一.简单介绍flask中的wtforms WTForms是一个支持多个web框架的form组件,主要用于对用户请求数据进行验证. 安装: pip3 install wtforms 二.简单使用wtfo ...
- Flask【第7篇】：Flask中的wtforms使用
flask中的wtforms使用 一.简单介绍flask中的wtforms WTForms是一个支持多个web框架的form组件,主要用于对用户请求数据进行验证. 安装: pip3 install w ...
- Flask框架知识点整合
Flask 0.Flask简介 Flask是一个基于Python开发并且依赖jinja2模板和Werkzeug WSGI服务的一个微型框架,对于Werkzeug本质是Socket服务端,其用于接收ht ...
- Flask 框架入门
Flask Flask是一个使用 Python 编写的轻量级 Web 应用框架.其 WSGI 工具箱采用 Werkzeug ,模板引擎则使用 Jinja2 . 安装 Flask 依赖两个外部库, We ...
随机推荐
- 【python爬虫】bs4遍历、搜索文档树 bs4使用css选择器 selenium基本使用 selenium查找标签 selenium执行js代码
目录 上节回顾 今日内容 0 bs4遍历文档树 1 bs4搜索文档树 1.1 find方法的其他参数 2 css选择器 3 selenium基本使用 4 无界面浏览器 4.1 模拟登录百度 5 sel ...
- Codeforces 451B Sort the Array(水题)
题目连接:Codeforces 451B Sort the Array 题目大意:给出一个长度为n的序列,可以有一次机会旋转a[l]到a[r]之间的数,问说可否形成一个递增序列. 解题思路:将数组排下 ...
- Java 并发编程之 JMM & volatile 详解
本文从计算机模型开始,以及CPU与内存.IO总线之间的交互关系到CPU缓存一致性协议的逻辑进行了阐述,并对JMM的思想与作用进行了详细的说明.针对volatile关键字从字节码以及汇编指令层面解释了它 ...
- 以API 配置的方式来配置你的 Dubbo 应用
package com.aswatson.csc.member.conf; import com.aswatson.csc.member.service.MemberCardService; impo ...
- ASP.Net Core 5.0 MVC log4net日志的添加
1. 引入程序集 Microsoft.Extensions.Logging.Log4Net.AspNetCore 及 log4net 2. 添加配置文件log4net.Config, 并将属性改为& ...
- Go 语言中 defer 使用时有哪些陷阱？
大家好,我是 frank ,「 Golang 语言开发栈」公众号作者. 01 介绍 defer 的使用方式是在其后紧跟一个函数调用或方法调用,确保在其所在的函数体返回之前执行其调用的函数或方法. 在 ...
- idea 解决git更新冲突
转载请注明出处: 对使用idea工具解决git冲突,最近有发现不同的解决冲突的方法,都很快捷方便,记录一下. 1.先commit 再pull,然后手动进行merge 左边部分是本地仓库的代码,右边部分 ...
- 前端开发环境搭建踩坑笔记——npm install node-sass安装失败的解决方案
.markdown-body { line-height: 1.75; font-weight: 400; font-size: 16px; overflow-x: hidden; color: rg ...
- K8S Only IPV6的创建过程之二 完整版
K8S Only IPV6的创建过程之二 完整版 整体过程 1. 阿里云新增一台虚拟机, 开通IPV6.与数据库,redis实现物理隔离. 并且进行环境基本处理,安装kubeadm等组件. 2. ku ...
- [转帖]Linux cache参数调优
https://zhuanlan.zhihu.com/p/136237953 缓存机制(cache)是保证Linux环境下对硬盘/flash操作效率的有效方式.cache建立在内存中,它缓存了硬盘/f ...