Flask框架运用WTForms实现用户注册的示例详解
作者：LyShark 发布时间：2021-07-31 06:50:12
标签：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" rel="external nofollow" rel="external nofollow" >
<link href="https://cdn.lyshark.com/javascript/font-awesome/4.7.0/css/font-awesome.min.css" rel="external nofollow" rel="external nofollow" rel="stylesheet">
<link href="https://cdn.lyshark.com/javascript/other/my_login.css" rel="external nofollow" rel="external nofollow" 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" rel="external nofollow" 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" rel="external nofollow" rel="external nofollow" >
<link href="https://cdn.lyshark.com/javascript/font-awesome/4.7.0/css/font-awesome.min.css" rel="external nofollow" rel="external nofollow" rel="stylesheet">
<link href="https://cdn.lyshark.com/javascript/other/my_login.css" rel="external nofollow" rel="external nofollow" 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="#" rel="external nofollow" 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)
代码运行效果如下:
来源：https://juejin.cn/post/7179547223804346428
0
投稿猜你喜欢
- 登录百度，首先当然是先抓百度的登录包 ，由于是网页登录，最方便的自然是httpwatch了，我使用的测试账号是itiandatest1，密码
颜色目标检测就是根据物体的颜色快速进行目标定位。使用cv2.inRange函数设定合适的阈值，即可以选出合适的目标。建立项目colordet- 多级联动下拉选择框，动态获取下一级，每一级数据为XML，可支持无限级（浏览器端需要Microsoft.XMLDOM支持）项目需要，一个材料类
- 首先看一下这三个函数：rtrim() ltrim() trim()；rtrim()定义以及用法： rtrim() 函数移除字符串右侧的空白字
- 本文实例总结了php随机取mysql记录方法。分享给大家供大家参考。具体分析如下：在php中要随机取mysql记录我们可以直接使用mysql
- 作者的BLOG：http://www.planabc.net/地图弹窗（map pop）具体演示运行代码框<!DOCTYPE html
- 享元模式（Flyweight Pattern）是什么享元模式是一种结构型模式，它通过共享对象来减少系统中的对象数量，从而降低了内存的使用和系
- 在实际的应用中，Access做应用程序时，经常会做成"数据"和"程序"两个数据库，"数据&
- 图片的间隙Ｑ：我有一张大图片，把它切割后在Dreamweaver中进行拼接，可是总是有间隙，不知为什么？Ａ：不知你是否把表格的边距、间距和边
- 最近项目需要，需要在表创建好之后，初始化一些数据。Django初始化数据的方法有很多，但都需要额外的手动操作，不智能。看网上有一种方法用po
- 将PHP的执行页面预先转换成HTML，是所谓的PHP静态化方法之一。其他还有模板替换法，opcache等方法。静态化的作用：提高网站的响应速
- 一、简化代码采用更为简短的写法，不仅可以减少输入的字符数，还可以减少文件大小。大部分采用简单写法的代码，执行效率都有轻微提高。1.1&nbs
- 由于业务需要，要查询客户的ip地址，将部分地区的客户过滤出来，开始想到使用ip数据库，发现读取纯真数据库的难度对我来说有些大，而我目前的时间
- 这篇论坛文章着重介绍了Access数据库出现0x80004005问题的解决方法，更多内容请参考下文：项目做了三个月了，终于也差不多完成了，昨
- MySQL插件式存储引擎是MySQL数据库服务器中的组件，负责为数据库执行实际的数据I/O操作，并能允许和强制执行面向特殊应用需求的特定特性
- 当你需要一个简单易用的导航菜单得时候。CSS Menu是个不错的选择。相对于Flash/Javascript，他们小巧轻便，而且方便使用。当
- 本文实例讲述了Python结合ImageMagick实现多张图片合并为一个pdf文件的方法。分享给大家供大家参考，具体如下：前段时间买了不少
- 我们都知道在9i之前，要想获得建表和索引的语句是一件很麻烦的事。我们通常的做法都是通过export with rows=no来得到，但它的输
- 返回首页的链接地址，有三种方法：1、一般方法是，直接写对应的域名地址，<a href="http://www.zfnn.co
- 一直以来，jQuery是我最喜欢的框架之一。1月14号 1.4 Released版本发布后，就迫不及待去了解了一下1.4版本对比以往1.3.
