Flask_wtf自定义 field样式(Placeholder, Style)、wtf.html、匹配 Bootstrap4、jinja2 quick_form

Flask-wtf + Flask-bootstrap


简简单单用一条语句就能让 jinja2 渲染出 form:wtf.quick_form(form)


但如果要实现自定义的表单样式,如下图,怎么做呢?


Live Demo: http://tianya.heroku.com/wtf




自定义错误提示:



很简单,修改3个地方就行:


forms.py

class CommentForm(Form):
    name = StringField('', validators=[Length(0, 64)], render_kw={"placeholder": "Your name",
                                                                  "style": "background: url(/static/login-locked-icon.png) no-repeat 15px center;text-indent: 28px"})
    email = StringField('', description='* We\'ll never share your email with anyone else.', validators= \
        [DataRequired(), Length(4, 64), Email(message=u"邮件格式有误")], render_kw={"placeholder": "E-mail: yourname@example.com"})
    comment = TextAreaField('', description=u"请提出宝贵意见和建议", validators=[DataRequired()],
                            render_kw = {"placeholder": "Input your comments here"})
    submit = SubmitField(u'提交')

复制 c:\git\tianya\venv\Lib\site-packages\flask_bootstrap\templates\bootstrap\wtf.html 

to: c:\git\tianya\app\templates\_wtf4.html


_wtf4.html

修改成 Bootstrap4 的告警样式

  {%- if field.errors %}
    {%- for error in field.errors %}
     <small class="form-text text-warning">{{error}}</small>
     {%- endfor %}
  {%- elif field.description -%}
<small class="form-text text-muted">{{field.description|safe}}</small>
   {%- endif %}
{%- endif %}

about.html

{% extends "base.html" %}
{% block title %}关于天涯脱水机 - {{ super() }}{% endblock %}
{% import "bootstrap/wtf.html" as wtf %}
{% import "_wtf4.html" as _wtf4 %}
{% block page_content %}

<div class="row comment-form" style="margin-top: 80px">
<div class="col-lg-6 offset-lg-3">
 <h3 class="panel-title">
    <a href="#" ><i class="fa fa-pencil">&nbsp</i>留言板</a></h3>
        {{ _wtf4.quick_form(form, form_type="basic ", button_map={'submit':'primary', } ) }}
</div>
</div>


2016-11-10:

可以进一步优化 _wtf.html,使其充分利用 Bootstrap4 的样式,更加美观!比如:


修改2个地方:

forms.py

添加一个字典fa_addon,通过 form.fa_addon 就可以传递样式给 wtf.html

class CommentForm(Form):
    name = StringField('', validators=[Length(0, 64)], render_kw={"placeholder": "your name",})
    email = StringField('', description='* We\'ll never share your email with anyone else.', validators= \
        [DataRequired(), Length(4, 64), Email(message=u"邮件格式有误")], render_kw={"placeholder": "yourname@example.com"})
    comment = TextAreaField('', description=u"* 请提出宝贵意见和建议", validators=[DataRequired()],
                            render_kw = {"placeholder": "input your comments here"})
    submit = SubmitField(u'提交')
    # FontAwesome css, show icon as prefix of fields
    fa_addon = {
        'email': 'fa-envelope-o',
        'name': 'fa-user-o',
    }

_wtf4.html

修改两处:添加 fa_addon参数,渲染field的fa_addon,最后,把 description移出div以外

{% macro quick_form(form,
。。。

  {%- for field in form %}
    {% if not bootstrap_is_hidden_field(field) -%}
      {{ form_field(field,
                    form_type=form_type,
                    horizontal_columns=horizontal_columns,
                    button_map=button_map,
                    fa_addon=form.fa_addon[field.name]) }}
    {%- endif %}
  {%- endfor %}

</form>
{%- endmacro %}

{% macro form_field(field,
                    form_type="basic",
                    horizontal_columns=('lg', 2, 10),
                    button_map={},
                    fa_addon="") %}
。。。
{% else -%}
  <div class="form-group">
  <div class="input-group {% if field.errors %} has-danger{% endif -%}
                         {%- if field.flags.required %} required{% endif -%}
  ">
      {%- if fa_addon %}
        <span class="input-group-addon"><i class="fa {{ fa_addon }} fa-fw"></i></span>
      {% endif %}
      {%- if form_type == "inline" %}
        {{field.label(class="sr-only")|safe}}
        {% if field.type == 'FileField' %}
          {{field(**kwargs)|safe}}
        {% else %}
          {{field(class="form-control", **kwargs)|safe}}
        {% endif %}
      {% elif form_type == "horizontal" %}
        {{field.label(class="control-label " + (
          " col-%s-%s" % horizontal_columns[0:2]
        ))|safe}}
        <div class=" col-{{horizontal_columns[0]}}-{{horizontal_columns[2]}}">
          {% if field.type == 'FileField' %}
            {{field(**kwargs)|safe}}
          {% else %}
            {{field(class="form-control", **kwargs)|safe}}
          {% endif %}
        </div>
        {%- if field.errors %}
          {%- for error in field.errors %}
            {% call _hz_form_wrap(horizontal_columns, form_type, required=required) %}
              <p class="help-block error"><small>{{error}}</small></p>
            {% endcall %}
          {%- endfor %}
        {%- elif field.description -%}
          {% call _hz_form_wrap(horizontal_columns, form_type, required=required) %}
            <p class="help-block grey"><small>{{field.description|safe}}</small></p>
          {% endcall %}
        {%- endif %}
      {%- else -%}
        {{field.label(class="control-label")|safe}}
        {% if field.type == 'FileField' %}
          {{field(**kwargs)|safe}}
        {% else %}
          {{field(class="form-control", **kwargs)|safe}}
        {% endif %}
    </div>
          {%- if field.errors %}
          {%- for error in field.errors %}
           <small class="form-text text-warning">{{error}}</small>
           {%- endfor %}
        {%- elif field.description -%}
        <small class="form-text text-muted">{{field.description|safe}}</small>
         {%- endif %}
      {%- endif %}
  </div>
{% endif %}

{% endmacro %}

源码:

https://github.com/kevinqqnj/wtf4.html.git

TODO:

Bootstrap4 - Forms -> Validation

.form-control -> 自带各种格式


2016-11-15

使用 Vue-validator,做客户端检查




表单信息没有填写准确时,不允许提交表单。





TODO:
radiobox, checkbox, pwd-repeat等验证
已完成,密码两次不一样时会提示。代码:https://github.com/kevinqqnj/wtf4.html



2016-11-17

在input框内,添加 删除 图标 addClear







TODO:
Flask-WTF 自定义Form type: http://python.jobbole.com/84356/ 
发布了22 篇原创文章 · 获赞 14 · 访问量 17万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览