如何美化Django UserCreationForm表单错误并隐藏字段标识？

Got it, let's fix those clunky form errors and make them look clean while hiding the field names. Here's how you can do it step by step:

1. 修改模板中的错误渲染逻辑 #

默认的 {{ form.errors }} 会渲染带字段名的列表，我们需要遍历错误消息并只显示内容。替换你模板里的 <div class="form-errors"> 部分：

<form action="{% url 'registration_pg' %}" method="post"> 
  {% csrf_token %} 
  <div class="name-container"> 
    {{form.first_name}} {{form.last_name}} 
  </div> 
  <div class="username-container form-inputs"> 
    {{form.username}} 
  </div> 
  <div class="student-info"> 
    {{form.std}} {{form.div}} {{form.rollno}} 
  </div> 
  <div class="user-fields"> 
    {{form.email}} {{form.password1}} {{form.password2}} 
  </div> 
  <!-- 替换原来的错误显示部分 -->
  <div class="form-errors">
    {% for error_list in form.errors.values %}
      {% for error in error_list %}
        <div class="error-message">
          {{ error }}
        </div>
      {% endfor %}
    {% endfor %}
  </div> 
  <button class="btn btn-block btn-info ripple-effect" type="submit" name="Submit" alt="sign in" style="background:#0277bd;">Submit</button> 
</form>

2. 添加CSS美化错误样式 #

在模板的 <head> 部分或者你的CSS文件中添加以下样式，让错误消息更美观：

.form-errors {
  margin: 15px 0;
}

.error-message {
  padding: 12px 15px;
  margin-bottom: 10px;
  border-radius: 4px;
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
  font-size: 0.95rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

3. （可选）自定义字段错误消息 #

如果想让错误内容更友好，你可以在 forms.py 中给每个字段添加自定义的错误提示：

class StudentCreationForm(UserCreationForm):
    first_name = forms.CharField(
        max_length=30, 
        widget=forms.TextInput(attrs={'id': 'first_name', 'class': 'form-control', 'placeholder': 'first name'}),
        error_messages={
            'required': '请输入你的名字',
            'max_length': '名字不能超过30个字符'
        }
    )
    last_name = forms.CharField(
        max_length=50, 
        widget=forms.TextInput(attrs={'id': 'last_name', 'class': 'form-control', 'placeholder': 'last name'}),
        error_messages={
            'required': '请输入你的姓氏',
            'max_length': '姓氏不能超过50个字符'
        }
    )
    username = forms.CharField(
        max_length=100, 
        widget=forms.TextInput(attrs={'id': 'username', 'class': 'form-control', 'placeholder': 'username eg (jhon16)'}),
        error_messages={
            'required': '请输入用户名',
            'unique': '这个用户名已经被使用了，请换一个试试',
            'max_length': '用户名不能超过100个字符'
        }
    )
    # 其他字段同理添加 error_messages
    std = forms.IntegerField(
        widget=forms.NumberInput(attrs={'id': 'std', 'class': 'form-control stu-info', 'placeholder': 'std'}),
        error_messages={
            'required': '请输入年级',
            'invalid': '请输入有效的年级数字'
        }
    )
    div = forms.CharField(
        max_length=1, 
        widget=forms.TextInput(attrs={'id': 'div', 'class': 'form-control stu-info', 'placeholder': 'division'}),
        error_messages={
            'required': '请输入班级',
            'max_length': '班级只能是1个字符'
        }
    )
    rollno = forms.IntegerField(
        widget=forms.NumberInput(attrs={'id': 'rollno', 'class': 'form-control stu-info', 'placeholder': 'roll no'}),
        error_messages={
            'required': '请输入学号',
            'invalid': '请输入有效的学号数字'
        }
    )
    email = forms.EmailField(
        widget=forms.EmailInput(attrs={'id': 'email', 'class': 'form-control', 'placeholder': 'email'}),
        error_messages={
            'required': '请输入邮箱地址',
            'invalid': '请输入有效的邮箱格式'
        }
    )
    password1 = forms.CharField(
        max_length=100, 
        widget=forms.PasswordInput(attrs={'id': 'password1', 'class': 'form-control', 'placeholder': 'password'}),
        error_messages={
            'required': '请输入密码',
            'password_mismatch': '两次输入的密码不一致'
        }
    )
    password2 = forms.CharField(
        max_length=100, 
        widget=forms.PasswordInput(attrs={'id': 'password2', 'class': 'form-control', 'placeholder': 'confirm password'}),
        error_messages={
            'required': '请确认密码'
        }
    )
    class Meta:
        model = User
        fields = ['first_name', 'last_name', 'username', 'std', 'div', 'rollno', 'email', 'password1', 'password2']

这样处理后，你的表单错误会变成美观的提示框，并且只显示错误内容，不会带上字段名称，用户体验会好很多！

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