准备工作:
- pip install flask-wtf (如有必要)
- pip install flask-login (如有必要)
基本原理:
- 基于 FlaskForm 类创建自定义的表单类,比如命名为: LoginForm
- 自定义的表单类不仅可以在.py代码中使用封装的方法,还可以直接植入 jinja 的模板文件中,生成代码块。因此在做 render_template 时,将 LoginForm 的实例当做参数送入 jinja 模板即可
- MethodView 的写法照旧,会用到 login_form.validate_on_submit() 方法来验证输入是否合规,如果不合规,直接重新渲染,login_form 会自动将报错信息带入 jinja 模板,将信息渲染出来给用户看
- login_form 在 jinja 模板中生成的代码块不仅仅包含正常使用时看到的录入框,还包含有特定条件下才显示的报错信息
- 针对每一个录入框的验证方法,是在 LoginForm 类的定义时,给每一个字段使用特定的类的构造方法时创建的。验证方法可能不止一个,因此是放在一个数组中传递给 validators 参数的
- wtforms.validators 中有很多预设好的验证方法类,比如:DataRequired, Email, Length,直接用这些类创建实例,放入 validators 数组即可。
- 输入验证问题还会涉及到防 CSRF 攻击带来的影响,处理不得当会造成 login_form.validate_on_submit() 的结果始终为 False,这是比较容易掉进去的坑。
创建 LoginForm 类
#encoding:utf8
from flask_wtf import FlaskForm
from wtforms import StringField,PasswordField
from wtforms.validators import DataRequired,Length,Email
class LoginForm(FlaskForm):
email=StringField(u'邮箱',_name='email',validators=[
DataRequired(u'必填'),
Email(u'邮箱格式不合规')
])
pswd=PasswordField(u'密码',_name='pswd',validators=[
DataRequired(u'必填'),
Length(6,20,u'长度必须在6-20字符之间')
])
- "email=StringField..."中的 email 会在 jinjia 模板、 MethodView 中的获取用户提交的参数值时用到。 它是作为 LoginForm 的类变量存在的。
- 创建录入框类( StringField / PasswordField )时
- 第一个参数会在生成 jinja 模板时,填充到 label 中
- 第二个参数 _name 会在生成 jinja 模板时,变成 input 标签的 name 值
- 各种 validators 中第一个参数,会生成一些正常状态下隐藏的提示信息,仅当用户填写错误时才会在刷新页面后显示出来
将 LoginForm 定义的信息送入 jinja 模板
在 MethodView 的定义代码中,render_template 时,就可将其送入模板。
# encoding:utf8
from flask import render_template,jsonify
from flask.views import MethodView
from ..models.account.forms.login_form import LoginForm
class LoginView(MethodView):
def __init__(self,template):
self.template=template
super(LoginView,self).__init__()
# 在这里创建一个 LoginForm() 实例
self.login_form = LoginForm()
def get(self):
# 在这里将 login_form 送入 jinja 模板
return render_template(self.template,form=self.login_form)
def post(self):
if not self.login_form.validate_on_submit():
# 在这里将 login_form 送入 jinja 模板,这次会让隐藏的报错信息显示出来
return render_template(self.template,form=self.login_form)
# 获取用户 POST 上来的值,是通过下面的方式
# self.login_form.email 是 LoginForm 类的那个名叫 email 的类变量
# 必须要通过 _value() 方法来获取值,否则获取到的是完整的 input 标签的 html 代码
print self.login_form.email._value(), self.login_form.pswd._value()
return jsonify({
'msg':'success',
'code':0
})
预防 CSRF 带来的坑
缺省状态下,flask 为表单开启了预防 CSRF 攻击的功能。 如果我们要手工明确指定开启防 CSRF ,可以在创建 LoginForm 实例时,传入参数: csrf_enabled = False,即: login_form=LoginForm(csrf_enabled = True) ,但是这样一来很可能造成 MethodView 中的 validate_on_submit() 方法返回值始终是 False!
原因是:很可能你没有在 jinja 模板中放入 secretKey , 这样一来 flask 做 CSRF 验证时肯定是不能通过的。当然这个输入结果就会被判为无效!
解决的办法有两种:
- 关闭这个表单的 CSRF 验证,只需要创建 login_form 时:login_form=LoginForm(csrf_enabled = False) 即可
- 在 jinja 模板中,加入 secretKey 生成的验证码,具体的方法在后面讲述 jinja 模板代码时再说。
jinja 模板
<form action={{url_for('main.view_login')}} method="POST" class="pure-form pure-form-stacked">
<fieldset>
<legend class="fs-28">登陆</legend>
</fieldset>
{{ form.csrf_token }} /** 有这个,才会将 secretKey 生成的验证码放入其中,使得提交的信息能够通过 CSRF 验证 **/
{{form.email.label}}
{{form.email()}}<label>{{ form.email.errors[0] }}</label>
{{form.pswd.label}}
{{form.pswd()}}<label>{{ form.pswd.errors[0] }}</label>
<button class="pure-button pure-button-primary" type="submit">提交</button>
</form>
可以看到,这个模板代码中输入框组合的结构是由三个元素组成的:
- label - 输入框名字,由 {{form.email.label}} 负责生成,其中的 email 是 LoginForm 类的类变量 email
- input - 由 {{form.email()}} 负责生成
- lable - 报错信息,由 <label>{{ form.email.errors[0] }}</label> 负责生成
前面讲述到的如果开启了防 CSRF 攻击的验证,模板代码中必须添加: {{ form.csrf_token }},它生成的 html 代码应该是这个样子的:
<input id="csrf_token" name="csrf_token" type="hidden"
value="IjlkMzMxYjlm....">