Django注册表单无法提交、存库及显示校验错误求助

核心问题梳理与修复步骤 #

1. 表单提交失败的根本原因：HTML属性拼写错误 #

你的HTML表单标签中metho="POST"是拼写错误，正确应为method="POST"——这个错误导致表单默认以GET方式提交，视图里的POST分支完全不会触发，自然没有任何响应。

修复后的HTML表单标签：

<form class="row g-3" method="POST" action="">

2. 视图逻辑错误：验证失败时重置表单丢失错误信息 #

views.py中，当表单验证失败时，你重新实例化了空的SignUpForm()，这会清空所有用户输入和错误提示，导致用户看不到校验失败的原因。同时你遗漏了redirect的导入，会触发NameError。

修复后的views.py代码：

from django.contrib.auth.forms import UserCreationForm
from django.contrib.auth import login as signin
from django.shortcuts import render, redirect  # 补上redirect导入
from .forms import SignUpForm

def signup(request):  
    form = SignUpForm()
    if request.method == 'POST' and 'btnsignup2' in request.POST:
        form = SignUpForm(request.POST)
        if form.is_valid(): 
            user = form.save()
            signin(request, user)
            return redirect('index')
        # 移除else分支的空表单实例化，保留验证失败的表单
    context = {                
        'basic': {'main': 'Project'},
        'form': form
    }
    return render(request, 'accounts/signup-dj.html', context)

3. 表单类缩进错误：字段未正确注册 #

forms.py中email字段和Meta类没有缩进，属于类外代码，Django无法识别这些配置，会导致表单字段不完整。同时可以删除冗余的login、authenticate导入。

修复后的forms.py代码：

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

class SignUpForm(UserCreationForm):
    # 缩进：属于SignUpForm类的成员
    email = forms.EmailField(max_length=250, required=True, widget=forms.EmailInput())
    
    # 缩进：属于SignUpForm类的内部类
    class Meta:
        model = User 
        fields = ['first_name', 'last_name', 'email', 'username', 'password1', 'password2']

4. Bootstrap 5校验失效的修复 #

要让Bootstrap的有效/无效样式生效，需要给表单字段添加对应样式类，并让Django表单输出校验相关属性：

方案1：在表单类中配置widget样式

修改forms.py的字段，添加Bootstrap的form-control类：

class SignUpForm(UserCreationForm):
    email = forms.EmailField(
        max_length=250, 
        required=True, 
        widget=forms.EmailInput(attrs={'class': 'form-control'})
    )
    first_name = forms.CharField(widget=forms.TextInput(attrs={'class': 'form-control'}))
    last_name = forms.CharField(widget=forms.TextInput(attrs={'class': 'form-control'}))
    username = forms.CharField(widget=forms.TextInput(attrs={'class': 'form-control'}))
    password1 = forms.CharField(widget=forms.PasswordInput(attrs={'class': 'form-control'}))
    password2 = forms.CharField(widget=forms.PasswordInput(attrs={'class': 'form-control'}))
    
    class Meta:
        model = User 
        fields = ['first_name', 'last_name', 'email', 'username', 'password1', 'password2']

方案2：在模板中渲染字段时添加样式

修改includes/form.html，确保每个字段的input加上form-control类，并利用Django表单的错误信息渲染Bootstrap的校验提示：

{% for field in form %}
<div class="mb-3">
    <label for="{{ field.id_for_label }}" class="form-label">{{ field.label }}</label>
    <input type="{{ field.field.widget.input_type }}" 
           name="{{ field.name }}" 
           id="{{ field.id_for_label }}"
           class="form-control {% if field.errors %}is-invalid{% endif %}"
           value="{{ field.value|default:'' }}">
    {% if field.errors %}
        {% for error in field.errors %}
            <div class="invalid-feedback">{{ error }}</div>
        {% endfor %}
    {% endif %}
</div>
{% endfor %}

同时在表单标签上添加novalidate属性，让Bootstrap接管前端校验：

<form class="row g-3" method="POST" action="" novalidate>

总结 #

按上述步骤修复后，表单会正常提交POST请求，验证失败时显示错误信息，数据能正确保存到数据库，同时Bootstrap的校验样式也会生效。

内容的提问来源于stack exchange，提问作者Muhammad Abraham