Django表单验证错误无法在前端页面显示问题求助

问题描述 #

开发Django用户注册功能时，表单验证错误能在终端打印，但前端页面无法显示。相关代码如下：

forms.py #

from .models import User

class userRegistrationForm(forms.ModelForm):
    password = forms.CharField(widget = forms.PasswordInput())
    confirm_password = forms.CharField(widget = forms.PasswordInput())
    class Meta:
        model = User
        fields = ['first_name', 'last_name', 'username', 'email','password']

views.py #

def registerUser(request):
    if request.method == 'POST':
        print(request.POST) #request.POST, WE ARE GETTING THE DATA HERE.
        form = userRegistrationForm(request.POST)
        if form.is_valid():

            # CREATE THE USER, USING create_user METHOD.
            first_name = form.cleaned_data['first_name']
            last_name = form.cleaned_data['last_name']
            email = form.cleaned_data['email']
            username = form.cleaned_data['username']
            password = form.cleaned_data['password']

            user = User.objects.create_user(first_name=first_name, last_name=last_name, username=username, email=email, password=password)
            user.role = User.CUSTOMER
            user.save()

            return redirect('registerUser')
        else:
            print("Invalid form")
            print(form.errors)
    else:
        form = userRegistrationForm()
    
    form = userRegistrationForm()
    context = {
        'form':form
    }
    return render(request, 'accounts/registerUser.html', context)

registerUser.html #

<ul class="errorlist">
    {% for field in form %}
        {% if field.errors %}
            {% for error in field.errors %}
                <li style="color: red;">{{error}}</li>
            {% endfor %}
        {% endif %}
    {% endfor %}
</ul>

问题原因及修复步骤 #

1. 核心问题：视图中覆盖了带错误的表单 #

在views.py的最后部分，不管POST请求是否处理了带错误的表单，你都重新创建了一个空的表单实例，直接覆盖了之前包含错误信息的form对象，导致前端拿到的永远是无错误的空表单。

修复后的views.py：

def registerUser(request):
    if request.method == 'POST':
        form = userRegistrationForm(request.POST)
        if form.is_valid():
            first_name = form.cleaned_data['first_name']
            last_name = form.cleaned_data['last_name']
            email = form.cleaned_data['email']
            username = form.cleaned_data['username']
            password = form.cleaned_data['password']

            user = User.objects.create_user(first_name=first_name, last_name=last_name, username=username, email=email, password=password)
            user.role = User.CUSTOMER
            user.save()

            return redirect('registerUser')
        else:
            print("Invalid form")
            print(form.errors)
    else:
        form = userRegistrationForm()
    
    # 移除这行覆盖表单的代码
    # form = userRegistrationForm()
    context = {
        'form':form
    }
    return render(request, 'accounts/registerUser.html', context)

2. 补充密码确认的验证逻辑 #

表单中添加了confirm_password字段，但未验证两次密码是否一致，需要在forms.py中添加清洁方法：

from django import forms
from .models import User

class userRegistrationForm(forms.ModelForm):
    password = forms.CharField(widget=forms.PasswordInput())
    confirm_password = forms.CharField(widget=forms.PasswordInput())
    
    class Meta:
        model = User
        fields = ['first_name', 'last_name', 'username', 'email','password']
    
    def clean(self):
        cleaned_data = super().clean()
        password = cleaned_data.get('password')
        confirm_password = cleaned_data.get('confirm_password')
        
        if password and confirm_password and password != confirm_password:
            self.add_error('confirm_password', "密码不匹配")
        return cleaned_data

3. 前端补充非字段错误的显示 #

如果存在非字段级别的错误（比如全局验证提示），需要在模板中添加对应的显示逻辑，同时优化字段错误的可读性：

<ul class="errorlist">
    <!-- 显示非字段错误 -->
    {% for error in form.non_field_errors %}
        <li style="color: red;">{{error}}</li>
    {% endfor %}
    <!-- 显示字段级错误 -->
    {% for field in form %}
        {% if field.errors %}
            {% for error in field.errors %}
                <li style="color: red;">{{ field.label }}: {{error}}</li>
            {% endfor %}
        {% endif %}
    {% endfor %}
</ul>

验证修复效果 #

重启Django服务后，提交不符合要求的注册信息，终端打印错误的同时，前端页面会正确显示对应的红色错误提示。

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