开心！发现一款功能强大的 Python 组件 FlaskForm

Wu_Candy

发布于 2022-07-05 14:04:43

1.4K0

发布于 2022-07-05 14:04:43

文章被收录于专栏：无量测试之道

Part1：FlaskForm 是什么

说到 FlaskForm，首先得谈谈 WTForms 是什么。

WTForms 是一个 Flask 集成的框架，也可以说是库。用于处理浏览器表单提交的数据。

它在 Flask-WTF 的基础上扩展并添加了一些随手即得的精巧的帮助函数，这些函数将会使在 Flask 里使用表单更加有趣。

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

每次我们在建立表单所创建的类都是继承于 Flask_WTF 中的 FlaskForm，而 FlaskForm 是继承 WTForms 中 Forms。

Part2：WTForm 支持的字段与验证器

WTForms 支持 HTML 字段：

1.字段类型说明

StringField—文本字段，相当于 type 类型为 text 的 input 标签
TextAreaField—多行文本字段
PasswordField—密码文本字段
HiddenField—隐藏文本字段
DateField—文本字段，值为 datetime.date 格式
DateTimeField—文本字段，值为 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—确保输入值不在可选列表中

Part3：示例演示

Python 代码

from flask import Flask,render_template,request,flash
#导入wtf扩展的表单类
from flask_wtf import FlaskForm
#导入自定义表单需要的字段
from wtforms import SubmitField,StringField,PasswordField
#导入wtf扩展提供的表单验证器
from wtforms.validators import DataRequired,EqualTo,Email,Length

app1 = Flask(__name__)
app1.config['SECRET_KEY']='1'

class Login(FlaskForm):
    username = StringField(label=u'用户名:',
                     validators=[DataRequired(message='用户名不能为空'),
                                 Length(min=6,max=12,message='长度为6-12位')],
                     render_kw={'placeholder':'请输入用户名...','maxlength':12}
                     )
    email =  StringField(u'邮箱',
                    validators=[DataRequired(message= u'邮箱不能为空'),
                                Length(1, 64),
                              Email(message= u'请输入有效的邮箱地址，比如：test@qq.com')])
    passwd = PasswordField(label=u'密码:', validators=[DataRequired(),
                            EqualTo('passwd2', message='密码不一致')])
    passwd2 = PasswordField(label=u'确认密码:',validators=[DataRequired()])
    submit = SubmitField(u'提交')

@app1.route('/', methods=['GET', 'POST'])
def index():
    form = Login()
    if form.validate_on_submit():
        name = form.username.data
        email=form.email.data
        pswd = form.passwd.data
        pswd2 = form.passwd2.data
        print(name, email,pswd, pswd2)
        return '注册成功'
    else:
        if request.method == 'POST':
            flash(u'信息有误，请重新输入！')
        print(form.validate_on_submit())
    return render_template('register.html', form=form)

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

Html 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form method="post">
{{ form.csrf_token() }}
    {{ form.username.label }}
    <p>{{ form.username }}</p>
    {% for tip in form.username.errors %}
        <span style="color:red">{{ tip }}</span>
    {% endfor %}
    <br>
    {{ form.email.label }}
    <p>{{ form.email }}</p>
    {% for tip in form.email.errors %}
        <span style="color:red">{{ tip }}</span>
    {% endfor %}
    <br>
     {{ form.passwd.label }}
    <p>{{ form.passwd }}</p>
    {% for tip in form.passwd.errors %}
        <span style="color:red">{{ tip }}</span>
    {% endfor %}
    <br>
    {{ form.passwd2.label }}
    <p>{{ form.passwd2 }}</p>
    <br>
![](https://files.mdnice.com/user/17949/8a26638a-5d2f-464b-8bec-6bc51206028a.png)

    <p>{{ form.submit() }}</p>

    {% for x in get_flashed_messages() %}
        {{ x }}
    {% endfor %}

</form>
</body>
</html>