如何移除掉django Form组件返回的错误提示的列表样式

66次阅读
没有评论

共计 1049 个字符,预计需要花费 3 分钟才能阅读完成。

环境

  • Python 3.6
  • Django 1.11.1

背景

定义好的 Form 组件代码如下:

class RegForm(forms.Form):
    name = forms.CharField(label='用户名', min_length=6, max_length=16,
                           widget=forms.widgets.TextInput(attrs={"class": "form-control"}),
                           error_messages={'min_length': '用户名不能少于 6 位',
                                           'max_length': '用户名不能超过 16 位',
                                           'required': '用户名不能为空'},
                           validators=[name_validator])
    pwd = forms.CharField(label='密码', min_length=5, max_length=16,
                          widget=forms.widgets.PasswordInput(render_value=True,
                                                             attrs={"class": "form-control"}),
                          error_messages={'min_length': '密码不能少于 5 位',
                                          'max_length': '密码不能超过 16 位',
                                          'required': '密码不能为空'})

当你在模板里面调用如{{form_obj.name.errors}}, form 组件生成的 html 源码会是多个 li 标签嵌套在 一个 ul 标签里面,具体如下图:如何移除掉 django Form 组件返回的错误提示的列表样式 我们现在要做的就是去除掉这个列表样式并使文字左对齐, 也即是像密码输入框下面的错误提示一样

情况一

如果你确定任何情况下都只会有一条错误提示如上图,那么你可以直接在上面的模板变量后面用 .0 取第一条错误,也即是 {{form_obj.pwd.errors.0}}

情况二

有两个校验条件同时没有被满足, 生成了两条错误提示,如下图:如何移除掉 django Form 组件返回的错误提示的列表样式 那么这时就不能简单的像情况一中的那样直接 .0 取第一条错误提示了, 这时候有两种方法。

方法一

因为 django 生成的错误 ul 列表中附加了一个叫 errorlist 的属性,
所以我们可以通过定义额外的 css 样式来消除列表样式并使文字靠左对齐如下:

<style>
    ul.errorlist{
        list-style-type: none;
        padding-left: 0;
    }
</style>

方法二

直接遍历\{\{ form_obj.name.errors \}\},如下:

{% for error in form_obj.name.errors %}
    <p>{{error}}</p>
{% endfor %}
正文完
 
sharp097
版权声明:本站原创文章,由 sharp097 2019-01-08发表,共计1049字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)