Flask之Form表单使用

flask-WTF：参考资料

flask-wtf Fields 资料

FLASK-WTF中文文档

有了上面2份资料就可以做flask的form表单，下面示例是实现一个添加的功能

1. 创建forms.py

from flask_wtf import FlaskForm
from wtforms import StringField,TextAreaField,SubmitField,SelectField
from wtforms.validators import DataRequired

class NewsForm(FlaskForm):
    title = StringField(label='新闻标题',validators=[DataRequired("请输入标题")],description="请输入标题",render_kw={"required":"required"})
    content = TextAreaField(label='新闻内容',validators=[DataRequired("请输入内容")],description="请输入内容",render_kw={"required":"required","class":"form-control"})
    types = SelectField(label='新闻类型',choices=[('首页','首页'),('动漫周边','动漫周边'),('军事要闻','军事要闻'),('每日上海','每日上海'),('图片','图片')])
    image = StringField(label='新闻图片',description="请输入图片地址",render_kw={"required":"required","class":"form-control"})
    submit = SubmitField('提交')

2. 在业务处理模块 wynews.py写上对应的路由

app.config['SECRET_KEY'] = 'a random string'      #  通过csrf
from forms import NewsForm
@app.route('/admin/add/',methods=("GET","POST"))
def add():
    form = NewsForm()
    if form.validate_on_submit():   # 如果form表单以submit进行提交，且用户填写的字段通过validators验证器，那么条件为真（submit提交方式就是“POST”）
        new_obj = News(             # 使用flask-sqlalchemy定义的一个表结构 
            title = form.title.data,
            content = form.content.data,
            types = form.types.data,
            create_at = datetime.now()
        )
        db.session.add(new_obj)
        db.session.commit()
        # 文字提示 flash
        return redirect(url_for('admin',page=2))         # 跳转到admin页
    return render_template('admin/add.html',form=form)

前端html的add.html

{% block content %}
    <form class="form-horizontal" role="form" method="post">
        <div class="form-group">
            <label for="title" class="col-sm-2 control-label">{{ form.title.label.text }}</label>
            <div class="col-sm-10">
                {{ form.title }}
            </div>
        </div>
      此处省略  结构类似
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                {{ form.csrf_token }}
                {{ form.submit }}
            </div>
        </div>
    </form>
{% endblock %}

效果图

ps:       

 {{ form.title.label}}   前端显示：<label for="title">新闻标题</label>