如何为Django表单字段添加valid_css_class，且不使用django-bootstrap-v5或django-crispy-forms

核心结论 #

Django 原生表单系统没有内置和 error_css_class 功能相反、验证通过后自动添加 valid 类的配置项，你可以通过以下两种自定义方案实现需求，无需依赖 django-bootstrap-v5、django-crispy-forms 等第三方插件。

实现方案 #

方案1：模板层实现（灵活度高，无需修改表单逻辑） #

直接在字段渲染模板中加入判断逻辑即可，注意要先判断表单是否已绑定数据（form.is_bound 为True），避免页面首次加载、用户还未提交时就给空字段加valid类：

<div class="form-item">
  <label for="{{ field.id_for_label }}">{{ field.label }}</label>
  <input 
    type="{{ field.field.widget.input_type }}"
    name="{{ field.name }}"
    id="{{ field.id_for_label }}"
    class="form-control {% if form.is_bound %}{% if field.errors %}error{% else %}valid{% endif %}{% endif %}"
    value="{{ field.value|default:'' }}"
  >
  {% if field.errors %}
    <span class="error-tip">{{ field.errors.0 }}</span>
  {% endif %}
</div>

如果需要多处复用，可将上述代码封装为自定义模板片段或者模板标签即可。

方案2：自定义表单基类实现（全局生效，无需重复写模板判断） #

通过重写Django原生的BoundField和表单基类，实现类似error_css_class的自动添加valid类的效果：

1. 首先自定义带valid类逻辑的BoundField：

from django.forms import BoundField as BaseBoundField

class BoundFieldWithValidClass(BaseBoundField):
    def css_classes(self, extra_classes=None):
        classes = super().css_classes(extra_classes)
        # 仅表单已提交、且当前字段无报错时添加valid类
        if self.form.is_bound and not self.errors:
            classes += " valid"
        return classes

2. 自定义表单基类，后续业务表单全部继承该基类即可：

# 普通表单基类
from django.forms import Form as BaseForm
class BaseCustomForm(BaseForm):
    def __getitem__(self, name):
        field = super().__getitem__(name)
        return BoundFieldWithValidClass(self, field.field, name)

# 如果你用ModelForm，同理自定义基类即可
from django.forms import ModelForm as BaseModelForm
class BaseCustomModelForm(BaseModelForm):
    def __getitem__(self, name):
        field = super().__getitem__(name)
        return BoundFieldWithValidClass(self, field.field, name)

配置完成后，直接用{{ field }}渲染字段时，会自动根据验证结果添加error或valid类。

内容的提问来源于stack exchange，提问作者superflyer11