注册/登录表单密码字段显示异常 | Django | HTML | Bootstrap

问题描述 #

使用HTML/CSS/Bootstrap + Django搭建自定义注册表单时，first_name、last_name、email字段正常显示必填状态，但password1和password2字段存在两个异常：

• 未显示必填标识
• 在forms.py的Meta.widgets中设置的form-control样式和占位符完全不生效

已尝试清理缓存、切换隐身模式、更换浏览器，问题仍存在。

核心原因 #

UserCreationForm中的password1和password2是表单自身定义的字段，不属于CustomUser模型字段，因此在Meta类的widgets字典中配置这两个字段是无效的——Meta.widgets仅对模型映射的字段生效。

解决方案 #

修改forms.py，在SignUpForm中重新定义password1和password2字段，手动指定它们的样式、占位符及必填属性：

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

class SignUpForm(UserCreationForm):
    # 重新定义密码字段，直接配置样式与属性
    password1 = forms.CharField(
        label="Password",
        widget=forms.PasswordInput(attrs={'class': 'form-control', 'placeholder': 'Enter password'}),
        required=True
    )
    password2 = forms.CharField(
        label="Confirm Password",
        widget=forms.PasswordInput(attrs={'class': 'form-control', 'placeholder': 'Confirm password'}),
        required=True
    )

    class Meta:
        model = CustomUser
        fields = ['first_name', 'last_name', 'email', 'password1', 'password2']
        widgets = {
            'first_name': forms.TextInput(attrs={'class': 'form-control', 'placeholder': 'Enter your first name'}),
            'last_name': forms.TextInput(attrs={'class': 'form-control', 'placeholder': 'Enter your last name'}),
            'email': forms.EmailInput(attrs={'class': 'form-control', 'placeholder': 'Enter your email'}),
        }

额外修正：views.py导入缺失 #

原views.py缺少login和redirect的导入，会导致表单验证通过后报错，补充导入：

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

def SignupView(request):
    if request.method == 'POST':
        form = SignUpForm(request.POST)
        if form.is_valid():
            user = form.save()
            login(request, user)
            return redirect('home')
    else:
        form = SignUpForm()
    return render(request, 'signup.html', {'form': form})

def LoginView(request):
    return render(request, 'login.html')

效果验证 #

修改完成后，password1和password2字段会：

• 自动应用Bootstrap的form-control样式
• 显示设置的占位符文本
• 标记为必填字段（浏览器会自动添加必填标识，表单提交时也会强制校验非空）

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