发现一款功能强大的 Python 组件 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+Unittest框架API自动化、

Python+Pytest框架API自动化、

Python+Pandas+Pyecharts大数据分析、

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

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

Python编程学习资源干货、

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

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

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

微信搜索公众号:“无量测试之道”,或扫描下方二维码:

添加关注,让我们一起共同成长!

posted on 2022-06-13 19:10  Wu_Candy  阅读(324)  评论(0编辑  收藏  举报