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
投稿猜你喜欢
QQ和微信这两款都是非常受人喜欢的聊天交友软件！可能大家平时没有留意到，也或者是大家可能很少用微信，或者很少用QQ吧！所以可能没有留意这些小- privot多对多关系的中间表。PT5框架会自动把privot带上。我们需要隐藏，因为我们不需要privot，而且pritvot也不在我们模
- 前言LogEntry是在后台开发中经常用到的模块，它在admin是默认开启的。可以使用LogEntry模块记录所有用户的操作记录。一方面可以
- 用过一段时间的caffe后，对caffe有两点感受：1、速度确实快; 2、 太不灵活了。深度学习技术一直在发展，但是caffe的更新跟不上进
- 在二维卷积函数tf.nn.conv2d()，最大池化函数tf.nn.max_pool()，平均池化函数tf.nn.avg_pool()中，卷
- 其实和爬取普通数据本质一样，不过我们直接爬取数据会直接返回，爬取图片需要处理成二进制数据保存成图片格式（.jpg,.png等）的数据文本。现
- 本文实例为大家分享了python实现简单计算器功能的具体代码，供大家参考，具体内容如下效果如图：主要思路：用列表保存按下的键，按下等于，转换
- 设计网站的同志背景主要有两种：学计算机、学艺术。基本上会写代码的不懂设计，会设计的不懂代码，这个格局似乎到今天还没变。某些学计算机的同学，有
- 场景现在的项目，基本都是前后端分离，后端只要提供Json等格式的数据就行。在这个背景下，模板渲染这个功能备受冷落，很少会在项目中用到。虽然在
- 微信小程序可谓是9月21号之后最火的一个名词了，一经出现真是轰炸了整个开发人员，当然很多App开发人员有了一个担心，微信小程序的到来会不会让
- 实例一--爬取页面import requestsurl="https//itemjd.com/2646846.html"
- 和大多数的语言脚本一样，学习ASP最好的方法就是亲身尝试ASP，使用你自己的系统安装PWS或者IIS。你可以边学习边在你自己的服务器上测试A
- 后边要做一个微信小程序，并要能获取用户微信绑定的手机号码。而小程序开发文档上边提供的获取手机号码的接口（getPhoneNumber()）返
- 本文实例为大家分享了python地震数据可视化的具体代码，供大家参考，具体内容如下参考源码：seisplot准备工作：在windows10下
- Vue 3.2 引入了语法，这是一种稍微不那么冗长的声明组件的方式。您可以通过向 SFC 的元素添加属性来启用它，然后可以删除组件中的一些样
- 由于javascript无法获取img文件头数据，必须等待其加载完毕后才能获取真实的大小，所以lightbox类效果为了让图片居中显示，导致
- 在Python中，字符串是不可变类型，即无法直接修改字符串的某一位字符。 因此改变一个字符串的元素需要新建一个新的字符串。常见的修
- 今天使用os.path.isdir()判断是否是文件夹的时候发现一个问题：lst = os.listdir(path) &nb
- 我们在使用bootstraptable做表格展示时，有时需要固定表格的高度当数据超出高度会出现滚动条，这时有可能出现表头列和数据列对不齐。出
- <html xmlns="http://www.w3.org/1999/xhtml"><head>
