在Django自定义模板中优雅地渲染表单帮助文本与错误信息

from django import forms
from django.contrib.auth.forms import UserCreationForm
from .models import CustomUser # 假设您有一个CustomUser模型

class CustomUserCreationForm(UserCreationForm):
    # 为字段添加帮助文本，例如在模型定义或表单字段定义中
    # 示例：
    # email = forms.EmailField(help_text="请输入有效的邮箱地址。")
    # password = forms.CharField(widget=forms.PasswordInput, help_text="密码长度至少8位，包含字母和数字。")

    class Meta:
        model = CustomUser
        fields = ('username', 'email', 'first_name', 'last_name', 'idade', 'telefone')
        # 可以在Meta类中直接定义help_texts
        help_texts = {
            'username': '请输入您的用户名（邮箱地址）。',
            'email': '请提供一个有效的邮箱地址。',
            'password2': '请再次输入您的密码以确认。',
            # 其他字段的help_text
        }

{% 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 %} {# 必须包含CSRF令牌 #}

    {# 遍历表单中的所有字段 #}
    {% for field in form %}
    <div class="group {% if field.name == 'password1' %}password1{% elif field.name == 'password2' %}password2{% endif %}">
      {# 渲染Django表单字段的HTML输入元素 #}
      {{ field }} 
      <span class="highlight"></span>
      <span class="bar"></span>
      {# 使用 field.label 动态获取字段标签 #}
      <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 %}

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

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

/* 为帮助文本添加样式 */
.help-text {
    font-size: 0.85em;
    color: #666;
    margin-top: 5px;
    display: block; /* 确保占据一行 */
}

/* 为错误列表添加样式 */
.errorlist {
    color: #dc3545; /* 红色 */
    font-size: 0.85em;
    list-style-type: none; /* 移除默认列表点 */
    padding-left: 0;
    margin-top: 5px;
}

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

/* 针对输入框聚焦时错误文本的颜色变化 */
input:focus ~ .errorlist {
    /* 可以在这里添加动画或颜色变化 */
}

/* 针对非字段错误 */
.non-field-errors {
    margin-top: 15px;
    font-weight: bold;
}