Flask系列：表单

Posted 2021-04-12 Program编程者

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Flask系列：表单相关的知识，希望对你有一定的参考价值。

kyv新作！让你更深入的认识flask。

前情提要：

/1、什么是表单？/

你上网总不会直接在URL栏上写参数来访问吧，网站上一般会有输入框，就像这样：

看到那个输入框了吗？可是它和表单有什么关系呢？首先我们要知道，什么是表单。

表单就相当于一张问卷，“题目”事先定好，后面填，最后返回服务器处理。

/2、如何在Flask中使用表单？/

使用表单需要一个额外的add-on（插件），使用喜闻乐见的：

pip3 install flask_wtf pip3 install wtforms

来安装这个add-on，同样的，要使用这些add-on，需要导入它们：

from flask_wtf import FlaskFormfrom wtforms import StringField, PasswordField, SubmitFieldfrom wtforms.validators import Length,DataRequired,EqualTo

StringField是输入字符串的控件，PasswordField是输入密码的控件，SubmitField是提交按钮。

validators库是限制器，每个限制器都有一个message参数用作错误提醒：

1.Length：长度限制，有min和max规定最小和最大长度

2.DataRequired：是限制值不能为空

3.EqualTo：表明值和某个变量必须一样（这个变量名要加括号）……

使用表单，先要“写好问题”，这是一个登录表单的样例：

class loginForm(FlaskForm): username =StringField( "用户名：", validators=[ Length(min=2,max=10,message="请输入2~10个字符长度的用户名"), DataRequired(message="用户名不能为空！") ] ) userpass =PasswordField( "密码：", validators=[ Length(min=4,max=12,message="请输入4~12个字符长度的密码"), DataRequired(message="密码不能为空！") ] )    submit =SubmitField("登录")

开头表明这个类继承自FlaskForm，后面定义了username、userpass、submit这几个值，submit是必须的，不过不一定要叫submit。

准备工作完毕，要怎样使用这个表单呢？

在需要使用表单的页面开头的@app.route要在url后面加上,methods=['GET’, ‘POST’]，表明这个页面接受GET和POST请求（GET用来返回渲染后的页面，POST用来返回表单）。

然后把这个表单类实例化，举个栗子：

Loginform = loginForm()

我们要怎么拿到表单的数据呢？

首先，我们要知道亲爱的user填好问卷没：

if loginform.validate_on_submit():

这个函数会告诉我们用户是（True）否（False）点了提交键，最好在确认点了提交键之后获取数据，数据只需要通过：

loginform.username.data

就可以获得loginformz红username字段的数据了。

最后一步，修改页面文件。

首先，我们要……（查看源码）额……加上一对<form>①标签（问为什么是一对的同学，去学学再回来），而且要把action设为一个空字符串，把method设为post，然后……直接上代码吧，各部分介绍我会用*标注②出来：

<form action="" method="post"> *设置action和method* {{form.hidden_tag()}} *用于加密，一般来说非必须，可是你总不想泄露隐私吧* <p> {{form.username.label}}*提示语* {{form.username()}} *输入框* {% for error inform.username.errors %} *遍历获取所有的错误提示* <br/><span style="color: red;">{{ error }}</span> *不会span的去补课* {% endfor %} </p> <p> {{form.userpass.label}} {{form.userpass()}} {% for error inform.userpass.errors %} <br/><span style="color: red;">{{ error }}</span> {% endfor %} </p> <p> {{form.submit}}*提交按钮，必须* </p></form>