如何在表单每个字段下方显示错误信息？以登录表单为例

嘿，我来帮你搞定登录表单字段下方显示错误信息的问题，针对Django场景咱们一步步来实现：

如果你用的是Django自带的AuthenticationForm，默认错误是统一提示的，没法分到单个字段下。所以最好自定义一个登录表单，在字段的clean方法里抛出对应错误，让错误和字段绑定：

from django import forms
from django.contrib.auth.forms import AuthenticationForm
from django.contrib.auth.models import User

class CustomLoginForm(AuthenticationForm):
    # 给字段加样式，也可以根据需求调整
    username = forms.CharField(widget=forms.TextInput(attrs={'class': 'form-control'}))
    password = forms.CharField(widget=forms.PasswordInput(attrs={'class': 'form-control'}))

    def clean_username(self):
        username = self.cleaned_data.get('username')
        # 验证用户名是否存在
        if not User.objects.filter(username=username).exists():
            raise forms.ValidationError("这个用户名不存在哦")
        return username

    def clean_password(self):
        username = self.cleaned_data.get('username')
        password = self.cleaned_data.get('password')
        # 验证密码是否正确（前提是用户名存在）
        if username:
            user = User.objects.filter(username=username).first()
            if user and not user.check_password(password):
                raise forms.ValidationError("密码输入错误啦")
        return password

这里的核心是用clean_<字段名>方法抛出错误，这样错误会被关联到对应的字段上，而不是表单的全局错误。

确保视图在表单验证失败时，把带错误的form对象传回模板：

from django.shortcuts import render, redirect
from .forms import CustomLoginForm
from django.contrib.auth import login

def login_view(request):
    if request.method == 'POST':
        form = CustomLoginForm(request.POST)
        if form.is_valid():
            # 验证通过就完成登录
            user = form.get_user()
            login(request, user)
            return redirect('home')  # 替换成你的首页路由名称
    else:
        form = CustomLoginForm()
    # 不管是GET请求还是验证失败，都把form传给模板
    return render(request, 'login.html', {'form': form})

这是最关键的一步，把每个字段单独渲染，然后在字段下方判断并显示该字段的错误信息。结合你提供的代码片段，修改后的模板应该是这样：

<div class="jumbotron">
  <form class="login" method="POST">
    {% csrf_token %}
    <h4>Log In</h4>

    <!-- 用户名字段组 -->
    <div class="mb-3">
      {{ form.username.label_tag }}
      {{ form.username }}
      {% if form.username.errors %}
        <div class="text-danger mt-1">
          {% for error in form.username.errors %}
            <p class="mb-0">{{ error }}</p>
          {% endfor %}
        </div>
      {% endif %}
    </div>

    <!-- 密码字段组 -->
    <div class="mb-3">
      {{ form.password.label_tag }}
      {{ form.password }}
      {% if form.password.errors %}
        <div class="text-danger mt-1">
          {% for error in form.password.errors %}
            <p class="mb-0">{{ error }}</p>
          {% endfor %}
        </div>
      {% endif %}
    </div>

    <!-- 处理全局非字段错误（比如账号锁定） -->
    {% if form.non_field_errors %}
      <div class="alert alert-danger mb-3">
        {% for error in form.non_field_errors %}
          {{ error }}
        {% endfor %}
      </div>
    {% endif %}

    <button type="submit" class="btn btn-primary">登录</button>
  </form>
</div>

细节补充： #

• 用{{ form.username.errors }}获取该字段的所有错误，循环显示（一个字段可能有多个错误提示）
• 用text-danger类（Bootstrap样式）让错误显示红色，你也可以自定义自己的错误样式
• 如果想用Bootstrap的错误输入框样式，还可以给错误字段加is-invalid类，比如：

  {{ form.username }}
  {% if form.username.errors %}
    {% with form.username.field.widget.attrs.class=form.username.field.widget.attrs.class|add:" is-invalid" %}
      {{ form.username }}
    {% endwith %}
    <div class="invalid-feedback">
      {% for error in form.username.errors %}
        {{ error }}
      {% endfor %}
    </div>
  {% endif %}
  

这样操作后，当用户名不存在时，用户名字段下方会显示“这个用户名不存在哦”；密码错误时，密码字段下方会显示“密码输入错误啦”，完全符合你的需求~

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