Django自定义注册模板：字段错误信息关联及help_text显示问题

你的问题核心是手动编写了所有<input>标签，完全绕开了Django表单的字段渲染机制，导致表单验证后的错误信息无法绑定到对应字段上。以下是具体修复步骤：

1. 调整表单类（可选，统一标签文本） #

在forms.py里自定义字段标签，匹配你原来的界面文本，避免模板里重复写固定label：

from django.contrib.auth.forms import UserCreationForm
from django import forms
from .models import CustomUser

class CustomUserCreationForm(UserCreationForm):
    # 自定义字段标签，对应原界面的文本
    username = forms.EmailField(label='E-mail')
    email = forms.CharField(label='Usuário')
    idade = forms.IntegerField(label='Idade')
    telefone = forms.CharField(label='Telefone')

    class Meta:
        model = CustomUser
        fields = ('username','email', 'first_name', 'last_name', 'idade',  'telefone')

2. 重构HTML模板，绑定表单字段与错误信息 #

替换所有手动编写的<input>为Django表单字段渲染，同时保留你的CSS结构，每个字段组内添加错误信息显示：

{% extends "base.html" %}
{% load static %}
{% block title %}Sign Up{% endblock %}

{% block content %}
<link rel="stylesheet" href="{% static 'css/inputs.css' %}">
<link rel="stylesheet" href="{% static 'css/signup.css' %}">
<!-- 添加错误和帮助文本的样式 -->
<style>
.field-error {
  color: #dc3545;
  font-size: 14px;
  margin-top: 5px;
}
.group.has-error input {
  border-bottom-color: #dc3545;
}
.group.has-error .bar:before,
.group.has-error .bar:after {
  background: #dc3545;
}
.help-text {
  color: #6c757d;
  font-size: 14px;
  margin-top: 5px;
}
</style>
<div class="signup">
  <a href="{% url 'login' %}"><- Voltar</a>
  <h1>Sign up</h1>
  <form action="" method="post">
    {% csrf_token %}
    
    <!-- 用户名（邮箱）字段 -->
    <div class="group {% if form.username.errors %}has-error{% endif %}">      
      {{ form.username }}
      <span class="highlight"></span>
      <span class="bar"></span>
      <label>{{ form.username.label }}</label>
      <!-- 显示字段错误 -->
      {% if form.username.errors %}
        <div class="field-error">
          {% for error in form.username.errors %}
            <span>{{ error }}</span>
          {% endfor %}
        </div>
      {% endif %}
    </div>

    <!-- 邮箱（用户名）字段 -->
    <div class="group {% if form.email.errors %}has-error{% endif %}">      
      {{ form.email }}
      <span class="highlight"></span>
      <span class="bar"></span>
      <label>{{ form.email.label }}</label>
      {% if form.email.errors %}
        <div class="field-error">
          {% for error in form.email.errors %}
            <span>{{ error }}</span>
          {% endfor %}
        </div>
      {% endif %}
    </div>

    <!-- 名字字段 -->
    <div class="group {% if form.first_name.errors %}has-error{% endif %}">      
      {{ form.first_name }}
      <span class="highlight"></span>
      <span class="bar"></span>
      <label>{{ form.first_name.label }}</label>
      {% if form.first_name.errors %}
        <div class="field-error">
          {% for error in form.first_name.errors %}
            <span>{{ error }}</span>
          {% endfor %}
        </div>
      {% endif %}
    </div>

    <!-- 姓氏字段 -->
    <div class="group {% if form.last_name.errors %}has-error{% endif %}">      
      {{ form.last_name }}
      <span class="highlight"></span>
      <span class="bar"></span>
      <label>{{ form.last_name.label }}</label>
      {% if form.last_name.errors %}
        <div class="field-error">
          {% for error in form.last_name.errors %}
            <span>{{ error }}</span>
          {% endfor %}
        </div>
      {% endif %}
    </div>

    <!-- 年龄字段 -->
    <div class="group {% if form.idade.errors %}has-error{% endif %}">      
      {{ form.idade }}
      <span class="highlight"></span>
      <span class="bar"></span>
      <label>{{ form.idade.label }}</label>
      {% if form.idade.errors %}
        <div class="field-error">
          {% for error in form.idade.errors %}
            <span>{{ error }}</span>
          {% endfor %}
        </div>
      {% endif %}
    </div>

    <!-- 电话字段 -->
    <div class="group {% if form.telefone.errors %}has-error{% endif %}">      
      {{ form.telefone }}
      <span class="highlight"></span>
      <span class="bar"></span>
      <label>{{ form.telefone.label }}</label>
      {% if form.telefone.errors %}
        <div class="field-error">
          {% for error in form.telefone.errors %}
            <span>{{ error }}</span>
          {% endfor %}
        </div>
      {% endif %}
    </div>
    
    <!-- 密码1字段 -->
    <div class="group password1 {% if form.password1.errors %}has-error{% endif %}">      
      {{ form.password1 }}
      <span class="highlight"></span>
      <span class="bar"></span>
      <label>{{ form.password1.label }}</label>
      {% if form.password1.errors %}
        <div class="field-error">
          {% for error in form.password1.errors %}
            <span>{{ error }}</span>
          {% endfor %}
        </div>
      {% endif %}
      <!-- 密码帮助文本 -->
      {% if form.password1.help_text %}
        <small class="help-text">{{ form.password1.help_text }}</small>
      {% endif %}
    </div>

    <!-- 密码2字段 -->
    <div class="group password2 {% if form.password2.errors %}has-error{% endif %}">      
      {{ form.password2 }}
      <span class="highlight"></span>
      <span class="bar"></span>
      <label>{{ form.password2.label }}</label>
      {% if form.password2.errors %}
        <div class="field-error">
          {% for error in form.password2.errors %}
            <span>{{ error }}</span>
          {% endfor %}
        </div>
      {% endif %}
      <!-- 密码确认帮助文本 -->
      {% if form.password2.help_text %}
        <small class="help-text">{{ form.password2.help_text }}</small>
      {% endif %}
    </div>

    <button type="submit">Sign Up</button>
  </form> 
</div>
{% endblock %}

3. 核心修改说明 #

• 用{{ form.field_name }}渲染字段，Django会自动生成正确的name、type、required等属性，同时关联字段的错误信息
• 给错误字段的.group容器添加has-error类，配合CSS高亮显示错误状态
• 在每个字段组内渲染{{ form.field_name.errors }}，将错误信息直接显示在对应字段下方
• 把帮助文本移到对应字段下方，让提示更贴近用户输入位置

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