前后端分离 在 Flask 1.0 中使用 Flask_WTF 进行表单验证

一、前言

Flask 的 WTF 略有特色
独立出一个表单类
作用效果使用方法和 Java JSR 303 类似,只不过Java 方面少了一个类,全注解,我觉得 WTF 若使用 Python 的装饰器也可以实现同 Java 一样的优雅编程效果
Java:SpringBoot 结合 JSR303 对前端数据进行校验
以下是在没有使用模板引擎下做表单验证,基本前后端使用 json 格式进行交互

二、代码

这里写图片描述

1.forms/user.py 表单验证

from flask_wtf import FlaskForm
from wtforms import Form, StringField
from wtforms.validators import Length, DataRequired


# DataRequired() 防止传空格!
class addUserForm(FlaskForm):
    name = StringField('name', validators=[Length(max=20, min=1, message="name长度需在1-20个字符间") ,DataRequired()])
    password = StringField('password', validators=[Length(max=20, min=1, message="password长度需在1-20个字符间"), DataRequired()])

2.templates/user/user.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>user</title>
</head>
<body>
<h1>user</h1>
<form method="post" action="/user/add">
    {{ form.hidden_tag() }}
    <input name="name" type="text" id="name" placeholder="name">
    <input name="password" type="password" id="password" placeholder="password">
    <input type="submit" value="提交">
</form>
</body>
</html>

3.views/user.py

from flask import Blueprint, render_template
from app.forms.user import addUserForm
from flask import jsonify

user = Blueprint('user', __name__, template_folder='../templates/user')


@user.route('/index')
def index():
    # 校验用到 form
    return render_template('user.html', form=addUserForm())


@user.route('/add', methods=['POST', 'GET'])
def add():
    form = addUserForm()
    if form.validate_on_submit():
        return jsonify({
            "status": "success",
            "msg": "添加成功",
            "data": {
                "name": form.name.data,
                "password": form.password.data
            }
        })
        # 验证未通过
    return jsonify({
        "status": "failed",
        "msg": "添加失败",
        "error": form.errors
    })

4.run.py 入口文件

from flask import Flask
from app.views.user import user
from flask_wtf.csrf import CSRFProtect  # 1.0.非 CsrfProtect 了

app = Flask(__name__)
app.secret_key = 'linhongcun'
CSRFProtect(app)    # POST 请求

# 注册蓝图
app.register_blueprint(user, url_prefix='/user')

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

三、效果

这里写图片描述

猜你喜欢

转载自blog.csdn.net/larger5/article/details/81228767