Django自定义模板中表单字段帮助文本与错误信息的精确显示指南

{% 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' %}">
<div class="signup">
  <a href="{% url 'login' %}"><- Voltar</a>
  <h1>Sign up</h1>
  <form action="" method="post">
    {% csrf_token %}

    {# 显示非字段错误（如表单整体验证失败的错误） #}
    {% if form.non_field_errors %}
        <ul class="errorlist">
            {% for error in form.non_field_errors %}
                <li>{{ error }}</li>
            {% endfor %}
        </ul>
    {% endif %}

    {# 迭代表单中的每个字段并渲染 #}
    {% for field in form %}
    <div class="group 
        {% if field.name == 'password1' %}password1{% endif %} 
        {% if field.name == 'password2' %}password2{% endif %}
    ">
      {# 渲染字段本身，例如 <input type="text" name="username" ...> #}
      {{ field }} 
      <span class="highlight"></span>
      <span class="bar"></span>
      {# 显示字段的标签 #}
      <label for="{{ field.id_for_label }}">{{ field.label }}</label>

      {# 显示字段的帮助文本 #}
      {% if field.help_text %}
          <small class="help-text">{{ field.help_text }}</small> 
      {% endif %}

      {# 显示字段的验证错误 #}
      {% if field.errors %}
          <ul class="errorlist">
              {% for error in field.errors %}
                  <li>{{ error }}</li>
              {% endfor %}
          </ul>
      {% endif %}
    </div>
    {% endfor %}
    <button type="submit">Sign Up</button>
  </form> 
</div>
{% endblock %}

from django.contrib.auth.forms import UserCreationForm
from .models import CustomUser # 假设您有自定义的CustomUser模型

class CustomUserCreationForm(UserCreationForm):
    # 可以为字段添加 help_text，例如：
    # email = forms.EmailField(help_text="请输入有效的电子邮件地址。")
    # password1 = forms.CharField(help_text="密码必须包含至少8个字符，且包含数字和字母。", widget=forms.PasswordInput)
    # password2 = forms.CharField(help_text="请再次输入您的密码。", widget=forms.PasswordInput)

    class Meta:
        model = CustomUser
        fields = ('username','email', 'first_name', 'last_name', 'idade',  'telefone')
        # 如果需要为 UserCreationForm 默认的 password1/password2 添加 help_text，
        # 可以在 forms.py 中显式定义这些字段，或者在模型字段中定义。
        # 例如：
        # widgets = {
        #     'password1': forms.PasswordInput(attrs={'placeholder': '输入密码'}),
        #     'password2': forms.PasswordInput(attrs={'placeholder': '确认密码'}),
        # }
        # help_texts = {
        #     'password1': '密码必须包含至少8个字符。',
        #     'password2': '请重复输入您的密码。',
        # }

/* inputs.css 和 signup.css (用户提供的一部分) */
/* ... 保持原有样式 ... */

/* 新增或修改以下样式以美化帮助文本和错误信息 */
.help-text {
    font-size: 0.8em;
    color: #666;
    margin-top: 5px;
    display: block; /* 确保独占一行 */
}

.errorlist {
    color: #d9534f; /* 红色 */
    font-size: 0.9em;
    list-style-type: none; /* 移除列表点 */
    padding-left: 0;
    margin-top: 5px;
}

.errorlist li {
    margin-bottom: 3px;
}

/* 如果需要，可以为包含错误的组添加特殊样式 */
.group .errorlist + label { /* 错误列表后紧跟的标签 */
    color: #d9534f;
}
input.error { /* 标记有错误的输入框 */
    border-bottom: 1px solid #d9534f;
}