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

环境

  • Python 3.6
  • Django 1.11.1

背景

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

1
2
3
4
5
6
7
8
9
10
11
12
13
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标签里面,具体如下图:

我们现在要做的就是去除掉这个列表样式并使文字左对齐, 也即是像密码输入框下面的错误提示一样

情况一

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

情况二

有两个校验条件同时没有被满足,生成了两条错误提示,如下图:

那么这时就不能简单的像情况一中的那样直接.0取第一条错误提示了,这时候有两种方法。

方法一

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

1
2
3
4
5
6
<style>
ul.errorlist{
list-style-type: none;
padding-left: 0;
}
</style>

方法二

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

1
2
3
\{\% for error in form_obj.name.errors \%\}
<p>\{\{ error \}\}</p>
\{\% endfor \%\}
Author: Sharp
Link: http://sharpgan.com/2019/01/08/how-to-remove-list-style-of-django-form-errors/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.
支付宝打赏
微信打赏