当前位置:首页>python>Python之Flask-WTF表单实现

Python之Flask-WTF表单实现

  • 2026-09-08 17:50:19
Python之Flask-WTF表单实现

一、Flask-WTF 是什么?

Flask-WTF 是 Flask 的第三方表单扩展库,用于快速实现表单定义、数据校验、CSRF 安全防护、错误消息闪现,替代原生手动表单校验,大幅简化开发。
Flask-WTF是基于 Flask 和 WTForms 的封装扩展,它让你可以更优雅地处理:HTML 表单生成、表单数据验证、CSRF 安全防护、文件上传处理。
Flask-WTF:Flask + WTForms + 安全增强(CSRF)。
https://flask.palletsprojects.com/zh-cn/stable/patterns/wtforms/
二、解决了什么问题?
在纯 Flask 里,你通常要手动做:request.form 取值、手写验证逻辑(是否为空、长度、格式)、手动处理错误提示、手动防 CSRF,代码会很快变得混乱。
Flask-WTF 帮你统一成“类 + 字段 + 规则”的方式。
三、如何开启CSRF 防护?
Flask-WTF 默认开启 CSRF:
app.config['SECRET_KEY'] = 'your-secret-key'
HTML 表单中会自动生成:
<input type="hidden" name="csrf_token" value="...">
四、WTForms / Flask-WTF 常用字段(最新整理)
字段类
说明
HTML表现
StringField
文本字段
<input type="text">
TextAreaField
多行文本
<textarea>
PasswordField
密码输入
<input type="password">
HiddenField
隐藏字段
<input type="hidden">
SubmitField
提交按钮
<input type="submit">
BooleanField
布尔值
checkbox
IntegerField
整数
number/text
FloatField
浮点数
number/text
DecimalField
高精度小数
text
DateField
日期
date
DateTimeField
日期时间
datetime-local
TimeField
时间
time
EmailField
邮箱
email
URLField
URL
url
TelField
电话
tel
SelectField
下拉单选
<select>
SelectMultipleField
多选下拉
<select multiple>
RadioField
单选按钮组
radio
FileField
文件上传
file
MultipleFileField
多文件上传
file multiple
FormField
嵌套表单
子表单
FieldList
字段列表
动态列表
BooleanField
复选框
checkbox
五、WTForms 常用验证器
验证器
说明
详细说明
DataRequired
必须有数据
⚠ 不允许空字符串
InputRequired
必须输入
⚠ 更底层(推荐表单输入用它)
Length
长度限制
min/max
NumberRange
数值范围
min/max
Email
邮箱验证
推荐替代旧 Regex
URL
URL验证
标准化
EqualTo
两字段一致
常用于密码确认
Regexp
正则验证
自定义规则
AnyOf
必须在列表中
choices校验
NoneOf
不允许在列表中
黑名单
Optional
可选字段
跳过验证
ValidationError
自定义错误
手动抛错
StopValidation
停止后续验证
控制流程
六、Flask-WTF 表单核心配置
配置项
说明
FlaskForm
所有表单必须继承
CSRFProtect
跨站请求防护(默认开启)
SECRET_KEY
必须配置(用于CSRF)
validate_on_submit()
判断是否提交 + 是否验证通过
form.hidden_tag()
自动生成 CSRF token
七、PyCharm 工具安装 flask-wtf
Flask-WTF
八、虚拟环境下安装(推荐)
cmd:
pip install flask flask-wtf
九、Flask-WTF 方式实现用户注册
9.1、导入Flask-WTF 表单基类
from flask_wtf import FlaskForm
9.2、导入表单字段
from wtforms import StringField, PasswordField, SubmitField
9.3、导入验证器(validators)
from wtforms.validators import DataRequired, Length, EqualTo
9.4、定义WTF表单类
class RegisterForm(FlaskForm):    username = StringField("用户名", validators=[        DataRequired(message="用户名不能为空"),        Length(min=3, max=16, message="用户名长度3-16位")    ])    password = PasswordField("密码", validators=[        DataRequired(message="密码不能为空"),        Length(min=6, message="密码至少6位")    ])    password2 = PasswordField("确认密码", validators=[        DataRequired(message="请再次输入密码"),        EqualTo("password", message="两次输入密码不一致")    ])    submit = SubmitField("注册")
9.5、注册路由视图
@bp.route('/register', methods=['GET', 'POST'])def register():    register_form = RegisterForm()    # 1、判断请求方式    if request.method == 'POST':        # 获取注册的用户名        username = register_form.username.data        # 2、验证参数        if register_form.validate_on_submit():            flash(username + '注册成功','wtf_form')            return redirect(url_for('auth.register'))        else:            flash('注册失败','wtf_form')    return render_template('auth/register.html', form=register_form)
9.6、前端 register.html 模板wtf代码
    <h1>用户注册:wtf方式</h1>    <formmethod="post">        {{ form.csrf_token() }}        <p>            {{ form.username.label }}<br>            {{ form.username(size=32) }}            {% for err in form.username.errors %}                <spanstyle="color:red">{{ err }}</span>            {% endfor %}        </p>        <p>            {{ form.password.label }}<br>            {{ form.password(size=32) }}            {% for err in form.password.errors %}                <spanstyle="color:red">{{ err }}</span>            {% endfor %}        </p>        <p>            {{ form.password2.label }}<br>            {{ form.password2(size=32) }}            {% for err in form.password2.errors %}                <spanstyle="color:red">{{ err }}</span>            {% endfor %}        </p>        <p>{{ form.submit() }}</p>    </form>    <!-- 展示flash提示消息 -->    {% for msg in get_flashed_messages(category_filter=['wtf_form']) %}        <pstyle="color:green">{{ msg }}</p>    {% endfor %}
9.7、访问验证效果

最新文章

随机文章