Flask 运用WTForms实现用户注册

微软技术分享

已于 2023-11-28 10:07:08 修改

阅读量4.6k

点赞数 2

分类专栏：《Python 编程技术实践》文章标签： flask python 后端 HTML 用户登录页面 WTForms

于 2022-10-10 12:51:29 首次发布

本文链接：https://blog.csdn.net/lyshark_csdn/article/details/127242482

版权

《Python 编程技术实践》专栏收录该内容

154 篇文章 63 订阅

订阅专栏

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

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

实现用户注册页面

首先定义my_login.css前端CSS文件

body {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: -webkit-center;
    line-height: 0.5;
    background: aliceblue;
}
.form-bg{
    background: #00b4ef;
}
.form-horizontal{
    background: #fff;
    padding-bottom: 10px;
    border-radius: 15px;
    text-align: center;
}
.form-horizontal .heading{
    display: block;
    font-size: 35px;
    font-weight: 700;
    padding: 35px 0;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 30px;
}
.form-horizontal .form-group{
    padding: 0 40px;
    margin: 0 0 25px 0;
    position: relative;
}
.form-horizontal .form-control{
    background: #f0f0f0;
    border: none;
    border-radius: 20px;
    box-shadow: none;
    padding: 0 20px 0 45px;
    height: 40px;
    transition: all 0.3s ease 0s;
}
.form-horizontal .form-control:focus{
    background: #e0e0e0;
    box-shadow: none;
    outline: 0 none;
}
.form-horizontal .form-group i{
    position: absolute;
    top: 12px;
    left: 60px;
    font-size: 17px;
    color: #c8c8c8;
    transition : all 0.5s ease 0s;
}
.form-horizontal .form-control:focus + i{
    color: #00b4ef;
}
.form-horizontal .fa-question-circle{
    display: inline-block;
    position: absolute;
    top: 12px;
    right: 60px;
    font-size: 20px;
    color: #808080;
    transition: all 0.5s ease 0s;
}
.form-horizontal .fa-question-circle:hover{
    color: #000;
}
.form-horizontal .text{
    float: left;
    margin-left: 7px;
    line-height: 20px;
    padding-top: 5px;
    text-transform: capitalize;
}
.form-horizontal .btn{
    font-size: 14px;
    color: #fff;
    border-radius: 100px;
    padding: 10px 70px;
    border: none;
    text-transform: capitalize;
    transition: all 0.5s ease 0s;
}
@media only screen and (max-width: 479px){
    .form-horizontal .form-group{
        padding: 0 25px;
    }
    .form-horizontal .form-group i{
        left: 45px;
    }
    .form-horizontal .btn{
        padding: 10px 20px;
    }
}

在templates目录下新建index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel='stylesheet' href="https://www.lyshark.com/javascript/bootstrap/3.3.7/css/bootstrap.min.css">
    <link href="https://www.lyshark.com/javascript/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://www.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://www.lyshark.com/javascript/bootstrap/3.3.7/css/bootstrap.min.css">
    <link href="https://www.lyshark.com/javascript/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://www.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)

代码运行效果如下:

微软技术分享

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Flask 运用WTForms实现用户注册

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

扫一扫