Django中UserCreationForm填写后点击提交按钮无响应如何解决

核心故障原因 #

• 视图函数未处理POST请求逻辑：当前register视图对所有请求均返回空白表单实例，未读取、校验用户提交的表单数据，提交后只会重新加载空白表单，无任何业务反馈
• 表单模板缺失CSRF校验令牌：Django默认要求所有POST请求携带CSRF令牌，未加该标签的提交请求会被直接拦截，也不会触发预期的错误提示

修复代码 #

1. views.py 修改后代码 #

from django.shortcuts import render, redirect
from django.contrib.auth.forms import UserCreationForm
from django.contrib import messages

def register(request):
    # 区分GET和POST请求
    if request.method == "POST":
        form = UserCreationForm(request.POST)
        # 校验表单数据合法性
        if form.is_valid():
            form.save()
            username = form.cleaned_data.get('username')
            messages.success(request, f"账号 {username} 注册成功")
            # 注册成功跳转至首页，可根据需求修改跳转路径
            return redirect('home')
    else:
        # GET请求返回空白表单
        form = UserCreationForm()
    return render(request, "register/register.html", {"form": form})

2. register.html 修改后代码 #

{% extends "main/base.html" %}

{% block title %}Create an Account{% endblock %}

{% block content %}
    <form method="POST" class="form-group">
        <!-- 新增CSRF令牌标签 -->
        {% csrf_token %}
        {{form}}
        <button type="submit" class="btn btn-success">Register</button>
    </form>
{% endblock %}

可选优化（展示表单错误提示） #

如果需要在表单填写有误时展示错误提示，可以在form标签上方添加如下代码：

{% if form.errors %}
    <div class="alert alert-danger">
        {% for field in form %}
            {% for error in field.errors %}
                <p>{{ field.label }}: {{ error }}</p>
            {% endfor %}
        {% endfor %}
        {% for error in form.non_field_errors %}
            <p>{{ error }}</p>
        {% endfor %}
    </div>
{% endif %}

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