flask_wtf表单

最新推荐文章于 2024-02-25 13:37:30 发布

zy_whynot

最新推荐文章于 2024-02-25 13:37:30 发布

阅读量167

点赞数

分类专栏： Flask

原文链接：http://www.bjhee.com/flask-ext7.html

版权

Flask 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

资料一

资料二

资料三

总结：
1、设置SECRET_KEY，加密生成令牌（csrf_token），再用领票验证表单数据是否正常；
2、定义表单模型；
3、渲染表单。

后端

from flask import Flask, flash
from flask import render_template
from flask_wtf import Form
from wtforms import StringField, SelectField, SelectMultipleField, SubmitField, PasswordField, RadioField
from wtforms.validators import DataRequired, Email, Length, EqualTo
from flask_bootstrap import Bootstrap

app = Flask(__name__)
bootstrap = Bootstrap(app)  # 绑定bootstrap和该项目的app
# app.secret_key = '123456'  # 用于生成加密令牌(csrf_token)，再用令牌验证表单数据的真伪
app.config["SECRET_KEY"] = "123456"


class RegisterFrom(Form):
    # 文本输入框，必填项
    name = StringField(label="姓名", validators=[DataRequired("姓名不能为空")])
    # 密码输入框，必填项
    password = PasswordField(label="密码", validators=[DataRequired("密码不能为空")])
    # 密码输入框，必填项，必须和password字段一致
    confirm_password = PasswordField(label="确认密码",
                                     validators=[DataRequired("确认密码不能为空"), EqualTo("password", message="两次密码不一致")])
    # 文本输入框，必填项，邮箱格式
    email = StringField(label="邮箱", validators=[Email(), DataRequired("邮箱不能为空")])
    # 文本输入框，必填项，长度11
    mobile = StringField(label="手机号", validators=[DataRequired("手机号不能为空"), Length(min=11, max=11)])
    # 单选框
    gender = RadioField(label="性别", choices=[("male", "男"), ("female", "女")], validators=[DataRequired("请选择性别")])
    # 下拉单选框，choices选项
    province = SelectField(label="省份", choices=[("陕西", "陕西"), ("河南", "河南"), ("甘肃", "甘肃"), ("...", "...")])
    # 下拉多选框，配合前端插件select2非常好用
    hobby = SelectMultipleField(label="兴趣爱好", validators=[DataRequired("兴趣爱好不能为空")])
    # 提交按钮
    submit = SubmitField(label="注册")


@app.route('/register', methods=["GET", "POST"])
def register():
    """
    添加用户数据
    :return:
    """
    add_form = RegisterFrom()
    # 选择框也可以通过choice属性设置选项
    add_form.hobby.choices = [("唱歌", "唱歌"), ("篮球", "篮球"), ("游泳", "游泳")]
    # 设置默认值
    add_form.province.data = "陕西"
    if add_form.validate_on_submit():
        flash("校验成功，保存数据")
        # user = User(...)
        # db.session.add(user)
        # db.session.commit()
        print("保存数据")
    return render_template("register.html", form=add_form)


@app.route("/edit_user=<int: num>", methods=["GET", "POST"])
def edituser(num):
    """
    修改用户数据
    :return:
    """
    user = User.query.get(num)
    edit_form = RegisterFrom(obj=user)
    if edit_form.validate_on_submit():
        edit_form.populate_obj(obj=user)
        flash("修改成功")
    return render_template('register.html', form=edit_form)


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

前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link type="text/css" rel="stylesheet" href="../static/css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="../static/js/select2/select2.css">
</head>
{% import 'bootstrap/wtf.html' as wtf %}
<body>
<div class="container-fluid all">
    <div class="maincontent">
        <div class="container" >
            <div class="row" >
                <div class="col-md-11">
                    {% with messages = get_flashed_messages() %}
                        {% if messages %}
                        <div style="text-align: center; margin-bottom: 1em;" >
                            {% for message in messages %}
                            <span style="font: italic bold 18px arial,sans-serif; color: red;">{{ message }}</span>
                            {% endfor %}
                        </div>
                        {% endif %}
                    {% endwith %}
                    <div class="page-header">
                        <h2>{{ header }}</h2>
                    </div>
{#                    {{ wtf.quick_form(form, form_type='horizontal', horizontal_columns=('md', 3, 8), button_map={'submit': 'primary'}) }}#}
                    {{ wtf.quick_form(form) }}
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>

<script type="text/javascript" src="../static/js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="../static/js/select2/select2.js"></script>
<script>
    $(function () {
        $("#hobby").select2();  // 使用select2给下拉多选框添加样式
    })
</script>