Flask - WTF和WTForms创建表单

Flask - WTF和WTForms创建表单

一. Flask-WTF

Flask-WTF是集成WTForms，并带有 csrf 令牌的安全表单和全局的 csrf 保护的功能。

每次我们在建立表单所创建的类都是继承与flask_wtf中的FlaskForm，而FlaskForm是继承WTForms中forms。

1.创建基础表单

class LoginForm(FlaskForm):

    username = StringField()

    password = PasswordField()

    remember_me = BooleanField(label='Keep me logged in')

2.CSRF保护

任何使用FlaskForm创建的表单发送请求，都会有CSRF的全部保护，在对应的template中HTML渲染表单时，可以加入form.csrf_token：

<form method="post">

    {{ form.csrf_token }}

</form>

但是如果模板中没有表单，则可以使用一个隐藏的input标签加入csrf_token。

<form method="post">

    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>

</form>

3.验证表单

在视图处理程序中验证请求:

def login():

    form = LoginForm()

    if form.validate_on_submit():

        return redirect('/success')

    return render_template('login.html', form=form)

# 使用validate_on_submit 来检查是否是一个 POST 请求并且请求是否有效。

或者下面这种方式:

new_lf = LoginForm(formdata=request.form)

        if new_lf.validate():

            return "登陆成功"

        else:

            return render_template("login.html", lf=new_lf)

4.文件上传

Flask-WTF 提供 FileField 来处理文件上传，它在表单提交后，自动从 flask.request.files 中抽取数据。FileField 的 data 属性是一个 Werkzeug FileStorage 实例。

from werkzeug import secure_filename

from flask_wtf.file import FileField

class PhotoForm(Form):

    photo = FileField('Your photo')

@app.route('/upload/', methods=('GET', 'POST'))

def upload():

    form = PhotoForm()

    if form.validate_on_submit():

        filename = secure_filename(form.photo.data.filename)

        form.photo.data.save('uploads/' + filename)

    else:

        filename = None

    return render_template('upload.html', form=form, filename=filename)

注意：在 HTML 表单的 enctype 设置成 multipart/form-data，如下:

5.验证码

Flask-WTF 通过 RecaptchaField 也提供对验证码的支持:

rom flask_wtf import Form, RecaptchaField

from wtforms import TextField

class SignupForm(Form):

    username = TextField('Username')

    recaptcha = RecaptchaField()

还需要配置一下信息：

# 字段					# 配置

RECAPTCHA_PUBLIC_KEY	# 必须公钥

RECAPTCHA_PRIVATE_KEY	# 必须私钥

RECAPTCHA_API_SERVER	# 可选验证码API服务器

RECAPTCHA_PARAMETERS	# 可选 一个 JavaScript（api.js）参数的字典

RECAPTCHA_DATA_ATTRS	# 可选 一个数据属性项列表 https://developers.google.com/recaptcha/docs/display

二. WTForms

WTForms是一个Flask集成的框架，或者是说库。用于处理浏览器表单提交的数据。它在Flask-WTF 的基础上扩展并添加了一些随手即得的精巧的帮助函数，这些函数将会使在 Flask 里使用表单更加有趣。

1. field字段

WTForms支持HTML字段：

字段类型:			说明:

StringFidle			文本字段， 相当于type类型为text的input标签

TextAreaField		多行文本字段

PasswordField		密码文本字段

HiddenField			隐藏文本字段

DateField			文本字段， 值为datetime.date格式

DateTimeFieeld		文本字段， 值为datetime.datetime格式

IntegerField		文本字段， 值为整数

DecimalField		文本字段， 值为decimal.Decimal

FloatField			文本字段， 值为浮点数

BooleanField		复选框， 值为True 和 False

RadioField			一组单选框

SelectField			下拉列表

SelectMultipleField	下拉列表， 可选择多个值

FileField			文件上传字段

SubmitField			表单提交按钮

FormFiled			把表单作为字段嵌入另一个表单

FieldList			子组指定类型的字段

2.Validators验证器

WTForms可以支持很多表单的验证函数：

Email

验证是电子邮件地址

EqualTo

比较两个字段的值； 常用于要求输入两次密钥进行确认的情况

IPAddress

验证IPv4网络地址

Length

验证输入字符串的长度

NumberRange

验证输入的值在数字范围内

Optional

无输入值时跳过其它验证函数

DataRequired

确保字段中有数据

Regexp

使用正则表达式验证输入值

URL

验证url

AnyOf

确保输入值在可选值列表中

NoneOf

确保输入值不在可选列表中

3.自定义Validators验证器

第一种： in-line validator（内联验证器）

也就是自定义一个验证函数，在定义表单类的时候，在对应的字段中加入该函数进行认证。下面的my_length_check函数就是用于判name字段长度不能超过50.

def my_length_check(form, field):

    if len(field.data) > 50:

        raise ValidationError('Field must be less than 50 characters')

class MyForm(Form):

    name = StringField('Name', [InputRequired(), my_length_check])

第二种：通用且可重用的验证函数

一般是以validate开头，加上下划线再加上对应的field字段（validate_filed），浏览器在提交表单数据时，会自动识别对应字段所有的验证器，然后执行验证器进行判断。

class RegistrationForm(FlaskForm):

    email = StringField('Email', validators=[DataRequired(), Length(1, 60), Email()])

    username = StringField('Username', validators=[DataRequired(), Length(1, 60),

        Regexp('^[A-Za-z][A-Za-z0-9_.]*$', 0, 'username must have only letters, numbers dots or underscores')])

    password = PasswordField('Password', validators=[DataRequired(), EqualTo('password2', message='password must match')])

    password2 = PasswordField('Confirm password', validators=[DataRequired()])

    def validate_email(self, field):

        if User.objects.filter(email=field.data).count() > 0:

            raise ValidationError('Email already registered')

    def validate_username(self, field):

        if User.objects.filter(username=field.data).count() > 0:

            raise ValidationError('Username has exist')

第三种：比较高级的validators

class Length(object):

    def __init__(self, min=-1, max=-1, message=None):

        self.min = min

        self.max = max

        if not message:

            message = u'Field must be between %i and %i characters long.' % (min, max)

        self.message = message

    def __call__(self, form, field):

        l = field.data and len(field.data) or 0

        if l < self.min or self.max != -1 and l > self.max:

            raise ValidationError(self.message)

length = Length

4.Widget组件

下面可以以登录界面为实例：

#!/usr/bin/env python

# -*- coding:utf-8 -*-

from flask import Flask, render_template, request, redirect

from wtforms import Form

from wtforms import validators

from wtforms import widgets

class LoginForm(Form):

    name = simple.StringField(

        label='用户名',

        validators=[

            validators.DataRequired(message='用户名不能为空.'),

        ],

        widget=widgets.TextInput(),

        render_kw={'class': 'form-control'}

    )

    pwd = simple.PasswordField(

        label='密码',

        validators=[

            validators.DataRequired(message='密码不能为空.'),

        ],

        widget=widgets.PasswordInput(),

        render_kw={'class': 'form-control'}

    )

三. 简单的登录验证表单实例

from flask import Flask, request, render_template, redirect

from wtforms.fields import simple, core

from wtforms import Form, validators

app = Flask(__name__)

app.config["DEBUG"] = True

class LoginForm(Form):

    username = simple.StringField(

        label="用户名:",

        validators=[

            validators.DataRequired(message="用户名不能为空"),

            validators.Length(min=4, max=10, message="用户名不能小于%(min)d,不能大于%(max)d")

        ],  # 声明校验方式

        id="username",

        # widget=widgets.FileInput(),

        render_kw={"class": "my_class"},

    )

    password = simple.PasswordField(

        label="密码:",

        validators=[

            validators.Length(max=10, min=6, message="password不能小于%(min)d,不能大于%(max)d"),

            validators.Regexp("\d+", message="密码只能是数字")

        ],

        id="pwd",

        render_kw={"style": "width:300px;"}

    )

    sub = simple.SubmitField(

        label="登陆",

        render_kw={"class": "bs"}

    )

@app.route("/login", methods=["GET", "POST"])

def login():

    if request.method == "GET":

        lf = LoginForm()

        return render_template("login.html", lf=lf)

    else:

        new_lf = LoginForm(formdata=request.form)

        if new_lf.validate():

            return "登陆成功"

        else:

            return render_template("login.html", lf=new_lf)

class RegForm(Form):

    username = simple.StringField(

        label="用户名:",

        validators=[

            validators.Length(min=4, max=10, message="用户名不能小于%(min)d,不能大于%(max)d")

        ]

    )

    password = simple.PasswordField(

        label="密码:",

        validators=[

            validators.Length(max=10, min=6, message="password不能小于%(min)d,不能大于%(max)d")

        ]

    )

    repassword = simple.PasswordField(

        label="确认眼神:",

        validators=[

            validators.EqualTo("password", message="眼神未确认")

        ]

    )

    email = simple.StringField(

        label="邮箱",

        validators=[

            validators.Email(message="邮箱格式不符")

        ]

    )

    gender = core.RadioField(

        label="性别:",

        choices=[

            (1, "女"),

            (2, "男")

        ],

        coerce=int

    )

    hobby = core.SelectMultipleField(

        label="嗜好",

        choices=[

            (1, "小姐姐"),

            (2, "小萝莉"),

            (3, "小正太"),

            (4, "小哥哥")

        ],

        coerce=int

    )

    sub = simple.SubmitField(

        label="登陆",

        render_kw={"class": "bs"}

    )

@app.route("/reg", methods=["GET", "POST"])

def reg():

    if request.method == "GET":

        regf = RegForm()

        return render_template("reg.html", regf=regf)

    else:

        new_regf = RegForm(formdata=request.form)

        if new_regf.validate():

            print(new_regf.data.get("gender"))

            print(new_regf.data.get("hobby"))

            return new_regf.data.get("username")

        else:

            return render_template("reg.html", regf=new_regf)

if __name__ == '__main__':

    app.run()

参考链接：

1.https://wtforms.readthedocs.io/en/stable/

2.https://flask-wtf.readthedocs.io/en/stable/