Flask_表单操作

最新推荐文章于 2022-08-24 10:02:54 发布

C_teacher

最新推荐文章于 2022-08-24 10:02:54 发布

阅读量450

点赞数

本文链接：https://blog.csdn.net/C_teacher/article/details/104701762

版权

Form表单,在Web应用中无处不在。比如: 用户登录表单, 用户注册表单。

所有的表单项都有共性,比如有文字输入框,单选框,密码输入框等;
表单的验证也有共性,比如有非空验证,长度限制,类型验证等。

如果有个框架,能把这些共性抽象出来,那就能大量简化我们的工作。Python的 WTForms 就提供了这些功能,这里我们就要结合Flask的 WTForms 扩展, Flask-WTF ,来介绍如何在Web应用中制作表单。

安装和启用

pip install Flask-WTF

常见的表单域类型

在这里插入图片描述

常见的验证规则

在这里插入图片描述

一个简单的案例来解释FLASK-WTF的使用方法
首先创建表单文件forms.py

# 登陆表单
from flask_wtf import FlaskForm
# 从wtforms中导入要用到的表单域
from wtforms import StringField,PasswordField,SubmitField
# 导入要用的到的验证规则
from wtforms.validators import DataRequired, Length,Email


class LoginForm(FlaskForm):
# label是文本框的标签或提示，在前端html的调用中要用到
# 验证规则中的message含义为条件不满足时要显示的信息
    email = StringField(label='电子邮件',validators=[
        DataRequired(message='邮箱不能为空'),Length(1,15,message='电子邮箱长度不符合条件'),
        Email(message=u'请输入有效的邮箱地址,比如:username@domain.com')
    ])
    password = PasswordField(label='密码',validators=[
        DataRequired(message='密码不能为空')
    ])
    submit = SubmitField('登陆')

然后编写后端逻辑代码app.py

from flask import Flask,render_template,flash
from forms import LoginForm
app = Flask(__name__)
# 将用到的配置信息存入config.py中，在此调用
app.config.from_pyfile('config.py')
@app.route('/login/',methods=['GET','POST'])
def login():
    # 实例化表单对象
    form = LoginForm()
    # 1)是否为post提交表单信息
    # 2)是否通过验证
    if form.validate_on_submit():
        # 获取表单内容
        email = form.email.data
        password = form.password.data
        if email == 'westos@qq.com' and password=='westos':
            # flash('登陆成功')
            return '登陆成功'
        else:
            return '登陆失败'
    else:
        return render_template('login.html',form = form)
        # 渲染login.html，并且把form对象传入html页面

if __name__ == '__main__':
    app.run()

再编写登陆页面login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
{% for message in get_flashed_messages() %}
<p style="color: red">{{message}}}</p>
{%  endfor %}
<form action="/login/" method="post">
    {{ form.hidden_tag() }}
    # 获取form表单中的标签和函数
    # 如果信息提交不上去可以通过{{ form.email.errors }}可以显示出message中的消息。
    {{ form.email.label }} {{ form.email() }} {{ form.email.errors }}
    {{ form.password.label }} {{ form.password() }}{{ form.email.errors }}
    {{ form.submit() }}
</form>
</body>
</html>

如果输入的信息不满足form.py中的验证规则的话，会导致信息无法提交到后台进行逻辑判断，这个错误跟不满足条件判断不一样，不满足判断条件可以提交并返回登陆失败
在这里插入图片描述

与前面制作的好看的登陆界面结合
app.py

from flask import Flask,render_template,flash
from forms import LoginForm
app = Flask(__name__)
app.config.from_pyfile('config.py')
@app.route('/login/',methods=['GET','POST'])
def login():
    # 实例化表单对象
    form = LoginForm()
    # 1)是否为post提交表单信息
    # 2)是否通过验证
    if form.validate_on_submit():
        # 获取表单内容
        email = form.email.data
        password = form.password.data
        if email == 'westos@qq.com' and password=='westos':
            # flash('登陆成功')
            return '登陆成功'
        else:
            return '登陆失败'
    else:
        return render_template('bs_login.html',form = form)

if __name__ == '__main__':
    app.run()

bs_login.html

<!DOCTYPE html>
<html>
<head>
<title>登录页面</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

{#    两种方式任选一种 #}
<!--{#<link href="../static/css/login.css" rel="stylesheet" type="text/css" media="all" />#}-->
<link href="{{ url_for('static', filename='login.css' ) }}" rel="stylesheet" type="text/css" media="all" />
{# url_for('静态文件存在的目录位置',filename='文件名')根据提供的信息，给生成一个url地址#}
</head>
<body>

	<!-- main -->
	<div class="main-w3layouts wrapper">
		<div class="main-agileinfo">
			<div class="agileits-top">
				<form action="/login/" method="post">
<!--                    {#         required="": 用户名不能为空           #}-->
<!--					<input class="text" type="text" name="username" placeholder="用户名" required="">-->
<!--					<input class="text" type="password" name="password" placeholder="密码" required="">-->
					{{form.hidden_tag()}}
					{{form.email.label}}{{form.email()}}{{form.email.errors}}
					{{form.password.label}}{{form.password()}}{{form.password.errors}}
					<div class="wthree-text">
						<ul>
							<li>
								<label class="anim">
									<input type="checkbox" class="checkbox" >
									<span> 记住 ?</span>
								</label>
							</li>
							<li><a href="#">忘记密码 ?</a> </li>
						</ul>
						<div class="clear"> </div>
					</div>
<!--					<input type="submit" value="登录">-->
					{{form.submit()}}
                    <p style="color: red;">{{ get_flashed_messages() }}</p>
                        {#get_flashed_messages() 默认返回的是一个列表#}
				</form>
				<p>创建一个账号? <a href="/register/"> 立即注册!</a></p>
			</div>
		</div>
		<!-- copyright -->
		<div class="w3copyright-agile">
			<p>© 2019 西部开源</p>
		</div>
		<!-- //copyright -->
		<ul class="w3lsg-bubbles">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
	<!-- //main -->

</body>
</html>

forms.py

# 登陆表单
from flask_wtf import FlaskForm
from wtforms import StringField,PasswordField,SubmitField
from wtforms.validators import DataRequired, Length,Email


class LoginForm(FlaskForm):
    email = StringField(label='电子邮件',validators=[
        DataRequired(message='邮箱不能为空'),Length(1,15,message='电子邮箱长度不符合条件'),
        Email(message=u'请输入有效的邮箱地址,比如:username@domain.com')
    ])
    password = PasswordField(label='密码',validators=[
        DataRequired(message='密码不能为空')
    ])
    submit = SubmitField('登陆')

在这里插入图片描述

C_teacher

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
Flask_表单操作

Form表单,在Web应用中无处不在。比如: 用户登录表单, 用户注册表单。所有的表单项都有共性,比如有文字输入框,单选框,密码输入框等;表单的验证也有共性,比如有非空验证,长度限制,类型验证等。如果有个框架,能把这些共性抽象出来,那就能大量简化我们的工作。Python的 WTForms 就提供了这些功能,这里我们就要结合Flask的 WTForms 扩展, Flask-WTF ,来介绍...
复制链接

扫一扫