如何自定义Django表单验证提示信息的样式

方法1：模板中手动渲染错误信息 #

Django默认会把表单错误放在<ul class="errorlist">里，你可以在模板里跳过默认渲染，手动输出错误并套用Bootstrap的alert alert-danger类：

全局非字段错误（比如表单验证的全局提示）：

{% if form.non_field_errors %}
  <div class="alert alert-danger" role="alert">
    {% for error in form.non_field_errors %}
      {{ error }}
    {% endfor %}
  </div>
{% endif %}

单个字段的错误提示：

渲染字段时，在字段下方单独处理错误：

<div class="mb-3">
  {{ field.label_tag }}
  {{ field }}
  {% if field.errors %}
    <div class="alert alert-danger mt-2" role="alert">
      {% for error in field.errors %}
        {{ error }}
      {% endfor %}
    </div>
  {% endif %}
</div>

方法2：自定义表单的错误列表类 #

如果不想逐个模板修改，可以自定义错误列表的渲染逻辑，让表单自动输出Bootstrap样式的错误：

在forms.py中定义自定义错误列表类，并替换表单的默认错误类：

from django import forms
from django.forms.utils import ErrorList

class BootstrapErrorList(ErrorList):
    def __str__(self):
        return self.as_alert()

    def as_alert(self):
        if not self:
            return ''
        # 把错误项包装成Bootstrap警告div
        return '<div class="alert alert-danger" role="alert">%s</div>' % ''.join([f'<p>{e}</p>' for e in self])

class ContactForm(forms.Form):
    # 你的表单字段定义
    name = forms.CharField(max_length=100)
    email = forms.EmailField()
    message = forms.CharField(widget=forms.Textarea)

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        # 替换默认错误列表为自定义类
        self.error_class = BootstrapErrorList

之后在模板里正常渲染{{ form }}，错误就会自动以Bootstrap警告样式显示。

方法3：用CSS覆盖默认样式 #

如果不想修改模板或表单代码，直接通过CSS把默认的errorlist样式改成Bootstrap警告的样子：

ul.errorlist {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0.75rem 1.25rem;
    border: 1px solid #f5c6cb;
    border-radius: 0.25rem;
    background-color: #f8d7da;
    color: #721c24;
}

ul.errorlist li {
    margin: 0;
}

把这段CSS添加到你的项目样式文件中，就能让默认的错误列表和Bootstrap的alert-danger样式一致。

内容的提问来源于stack exchange，提问作者Arshia Haeri-Mehrizi