Django用户注册系统故障求助：提交表单无用户创建且页面重复显示

问题核心 #

注册页面填写信息提交后，系统未创建用户，仅刷新显示原表单——本质是表单提交的数据未被Django表单正确接收，导致验证失败，进而触发重新渲染表单的分支。

关键错误点 #

1. 模板表单字段未匹配Form类定义 #

手动编写的输入框存在多处错误，导致Django无法映射POST数据：

• 所有输入框未设置name属性，无法与Form类字段关联
• 用户名输入框的type写成uername（应为text）
• 两个密码框的name均为password，但Form类中定义的是password1和password2
• 静态文件路径使用反斜杠\，跨平台会出现加载错误
• viewport元标签存在语法错误（width=\,）

2. 未渲染表单验证错误信息 #

模板中未显示表单验证失败的提示，无法直观得知失败原因。

修复方案 #

方案一：使用Django表单自动渲染（推荐） #

直接利用Django表单的渲染能力，避免手动编写的错误：

{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@1,500&family=Josefin+Sans&family=Poppins:ital,wght@0,400;0,700;1,300&family=Roboto&family=Rubik+Pixels&family=Yanone+Kaffeesatz&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="{% static 'css/signup.css' %}">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <title>signup now</title>
</head>
{% block content %}
    <div class="login">
        <h3 class="text-center">Signup Now</h3>
        <hr>
        <form method="post" action="{% url 'accounts:user_register' %}" novalidate>
            {% csrf_token %}
            
            {% for field in form %}
                <div class="form-group sm-3">
                    <label class="form-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
                    {{ field }}
                    {% if field.errors %}
                        <div class="invalid-feedback d-block">
                            {{ field.errors.0 }}
                        </div>
                    {% endif %}
                </div>
            {% endfor %}

            <input class="btn btn-success w-100 rounded-pill " type="submit" value="Register">
        </form>
    </div>
{% endblock %}

此方式自动生成正确的name、id属性，同时渲染字段错误提示，还能复用Form类中定义的样式属性。

方案二：手动修正输入框属性 #

若坚持手动编写输入框，需保证name与Form类字段名完全一致：

<!-- 修正后的邮箱字段 -->
<div class="form-group sm-3 ">
    <label class="form-label" for="email">Email Address:</label>
    <input class="form-control rounded-pill" type="email" name="email" id="email" placeholder="Enter your Email " required>
    {% if form.email.errors %}
        <div class="invalid-feedback d-block">
            {{ form.email.errors.0 }}
        </div>
    {% endif %}
</div>

<!-- 修正后的用户名字段 -->
<div class="form-group sm-3 ">
    <label class="form-label" for="username">Username:</label>
    <input class="form-control rounded-pill" type="text" name="username" id="username" placeholder="Choose a Username " required>
    {% if form.username.errors %}
        <div class="invalid-feedback d-block">
            {{ form.username.errors.0 }}
        </div>
    {% endif %}
</div>

<!-- 修正后的密码字段 -->
<div class="form-group">
    <label class="form-label" for="password1">Password:</label>
    <input class="form-control rounded-pill" type="password" name="password1" id="password1" placeholder="Enter your Password" required>
    {% if form.password1.errors %}
        <div class="invalid-feedback d-block">
            {{ form.password1.errors.0 }}
        </div>
    {% endif %}
</div>

<!-- 修正后的确认密码字段 -->
<div class="form-group">
    <label class="form-label" for="password2">Confirm Password:</label>
    <input class="form-control rounded-pill" type="password" name="password2" id="password2" placeholder="Confirm your Password" required>
    {% if form.password2.errors %}
        <div class="invalid-feedback d-block">
            {{ form.password2.errors.0 }}
        </div>
    {% endif %}
</div>

同时修正静态文件路径和viewport标签：

• 将{% static 'css\signup.css' %}改为{% static 'css/signup.css' %}
• 将<meta name="viewport" content="width=\, initial-scale=1.0">改为<meta name="viewport" content="width=device-width, initial-scale=1.0">

验证修复 #

修复后提交表单：

• 若数据符合验证规则，会成功创建用户并跳转到首页
• 若验证失败，页面会显示具体错误信息（如密码不匹配、邮箱已存在等）

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