如何在模板中显示Django认证系统的字段错误？

首先你的模板里有个小问题：输入框的value属性用了{{ form.email.key }}，这是错误的写法，应该替换为{{ form.email.value|default:'' }}，这样才能保留用户提交后输入的内容，避免表单清空。

接下来要显示每个字段的错误，Django表单对象的每个字段都自带errors属性，你可以直接在对应字段的输入框下方渲染这些错误，具体实现如下：

1. 单个字段错误的渲染 #

在每个<div class="input-group">内、输入框的下方添加错误显示代码，因为一个字段可能触发多个错误（比如格式不符+已被注册），用循环逐个展示更清晰：

{% if form.email.errors %}
    <div class="error-message">
        {% for error in form.email.errors %}
            <p>{{ error }}</p>
        {% endfor %}
    </div>
{% endif %}

2. 非字段错误的处理 #

有些错误不属于单个字段（比如两次输入的密码不匹配），Django会把这类错误归类到form.non_field_errors中，你可以在表单开头或者结尾添加这部分代码来展示：

{% if form.non_field_errors %}
    <div class="non-field-errors">
        {% for error in form.non_field_errors %}
            <p>{{ error }}</p>
        {% endfor %}
    </div>
{% endif %}

修改后的完整模板 #

<section class="form-container___auth">
    <div class="form-container">
        <img src="{% static './images/white-logo-all.png'%}" />
        <p class="title">ثبت نام دانش آموز</p>

        <form class="form" method="post" action="">
            {% csrf_token %}
            
            <!-- 非字段错误展示 -->
            {% if form.non_field_errors %}
                <div class="non-field-errors">
                    {% for error in form.non_field_errors %}
                        <p>{{ error }}</p>
                    {% endfor %}
                </div>
            {% endif %}

            <div class="input-group">
                <label for="{{ form.email.id_for_label }}">ایمیل</label>
                <input type="email" name="{{ form.email.name }}" id="{{ form.email.id_for_label }}" placeholder="" value="{{ form.email.value|default:'' }}">
                <!-- 邮箱字段错误 -->
                {% if form.email.errors %}
                    <div class="error-message">
                        {% for error in form.email.errors %}
                            <p>{{ error }}</p>
                        {% endfor %}
                    </div>
                {% endif %}
            </div>

            <div class="input-group">
                <label for="{{ form.username.id_for_label }}">نام کاربری</label>
                <input type="text" name="{{ form.username.name }}" id="{{ form.username.id_for_label }}" placeholder="" value="{{ form.username.value|default:'' }}">
                <!-- 用户名字段错误 -->
                {% if form.username.errors %}
                    <div class="error-message">
                        {% for error in form.username.errors %}
                            <p>{{ error }}</p>
                        {% endfor %}
                    </div>
                {% endif %}
            </div>

            <div class="input-group">
                <label for="{{ form.password1.id_for_label }}">رمز عبور</label>
                <input type="password" name="{{ form.password1.name }}" id="{{ form.password1.id_for_label }}" placeholder="" value="{{ form.password1.value|default:'' }}">
                <!-- 密码1字段错误 -->
                {% if form.password1.errors %}
                    <div class="error-message">
                        {% for error in form.password1.errors %}
                            <p>{{ error }}</p>
                        {% endfor %}
                    </div>
                {% endif %}
            </div>

            <div class="input-group">
                <label for="{{ form.password2.id_for_label }}">تکرار رمز عبور</label>
                <input type="password" name="{{ form.password2.name }}" id="{{ form.password2.id_for_label }}" placeholder="" value="{{ form.password2.value|default:'' }}">
                <!-- 密码2字段错误 -->
                {% if form.password2.errors %}
                    <div class="error-message">
                        {% for error in form.password2.errors %}
                            <p>{{ error }}</p>
                        {% endfor %}
                    </div>
                {% endif %}
            </div>

            <button type="submit" class="sign">ثبت نام</button>
        </form>
        
        <div class="social-message">
            <div class="line"></div>
            <p class="message">ورود</p>
            <div class="line"></div>
        </div>
        
        <p class="signup">.اگر حساب کاربری دارید ، وارد سایت شوید
            <a rel="noopener noreferrer" href="{% url 'login' %}" class="">ورود</a>
        </p>
    </div>
</section>

3. 样式优化建议 #

可以给错误信息添加CSS样式，让它更显眼：

.error-message, .non-field-errors {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

这样用户提交表单后，错误信息会精准显示在对应字段下方，非字段错误会展示在表单顶部，完全适配你的自定义模板结构。

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