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

作者：IT小白 | 2024-04-27 23:41:30

踩

flaskform

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>

Part4：页面提交后的效果展示

欢迎关注【无量测试之道】公众号，回复【领取资源】

Python+Unittest框架API自动化、

Python+Pytest框架API自动化、

Python+Pandas+Pyecharts大数据分析、

Python+Selenium框架Web的UI自动化、

Python+Appium框架APP的UI自动化、

Python编程学习资源干货、

资源和代码免费送啦~
文章下方有公众号二维码，可直接微信扫一扫关注即可。

备注：我的个人公众号已正式开通，致力于IT互联网技术的分享。

包含：数据分析、大数据、机器学习、测试开发、API接口自动化、测试运维、UI自动化、性能测试、代码检测、编程技术等。

微信搜索公众号：“无量测试之道”，或扫描下方二维码：
在这里插入图片描述

添加关注，让我们一起共同成长！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/499318