Django CRUD项目：提交失败/重载后保留表单数据的实现方案

问题原因 #

当前代码在检测到邮箱已注册时，仅返回错误消息但未将用户提交的表单数据传递到模板，导致页面刷新后表单清空。同时模板中表单控件未正确绑定提交过的数据，无法回显用户输入。

解决方案 #

1. 修改添加成员的视图函数（view.py） #

当邮箱重复时，将POST提交的所有数据传入模板上下文，让模板可以回显这些数据：

@login_required
def user_data_create(request):    
    if request.method == 'POST':
        name = request.POST['name']
        email = request.POST['email']
        phone = request.POST['phone']
        gender = request.POST.get('gender', '')  # 用get避免键不存在报错
        role = request.POST.get('role', 'Traniee')
        if Members.objects.filter(email=email).exists():
            messages.error(request,"该邮箱已注册")
            # 将提交的数据打包传入模板
            form_data = {
                'name': name,
                'email': email,
                'phone': phone,
                'gender': gender,
                'role': role
            }
            # 传递form_data到模板
            return render(request, 'add.html', {'form_data': form_data})
        else:    
            user_data = Members.objects.create(user=request.user, name=name, email=email, 
                                                phone=phone, gender=gender,role=role)
            messages.success(request,"新成员添加成功")
            return redirect('dashboard_page')
    # GET请求时初始化空的form_data，避免模板报错
    return render(request, 'add.html', {'form_data': {}})

2. 修改添加页面模板（add.html） #

更新表单控件，绑定form_data中的数据，实现回显：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加成员</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
        crossorigin="anonymous"></script>
</head>
{% load static %}
<link rel="stylesheet" href="{% static 'css/style.css' %}">

<body>
    <div>
        {%if messages%}
        {% for message in messages%}
        <div id="message_container" class="alert alert-warning alert-dismissible fade show text-center" role="alert">
            {{message}}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        {%endfor%}
        {%endif%}
    </div>

    <div class="container1">
        <h1>添加成员</h1>
        <form action="{% url 'user_data_create' %}" method="post">
            {% csrf_token %}
            <label for="">姓名</label><br><br>
            <input type="text" name="name" value="{{ form_data.name|default:'' }}" pattern="^[^ ].+[^ ]$" title="请移除多余空格" required><br><br>
            
            <label for="">邮箱</label><br><br>
            <input type="email" name="email" value="{{ form_data.email|default:'' }}" required><br><br>

            <label for="">联系方式</label><br><br>
            <input type="text" name="phone" value="{{ form_data.phone|default:'' }}" title="请输入10位数字" maxlength="10" minlength="10"
            pattern="\d{10}" required><br><br>

            <p>请选择性别:</p>
            <input type="radio" name="gender" value="Male" {% if form_data.gender == 'Male' %}checked{% endif %}>
            <label for="male">男</label><br>
            <input type="radio" name="gender" value="Female" {% if form_data.gender == 'Female' %}checked{% endif %}>
            <label for="female">女</label><br>
            <input type="radio" name="gender" value="Other" {% if form_data.gender == 'Other' %}checked{% endif %}>
            <label for="other">其他</label>

            <br><br>
            <label for="role">选择身份:</label>
            <select name="role" id="role">
              <option value="None" {% if form_data.role == 'None' %}selected{% endif %}>无</option>  
              <option value="FM" {% if form_data.role == 'FM' %}selected{% endif %}>FM</option>
              <option value="TM" {% if form_data.role == 'TM' %}selected{% endif %}>TM</option>
              <option value="TL" {% if form_data.role == 'TL' %}selected{% endif %}>TL</option>
              <option value="Traniee" {% if form_data.role == 'Traniee' or not form_data.role %}selected{% endif %}>实习生</option>
            </select>   <br><br>
            
            <a class="button2" href="{% url 'dashboard_page' %}">
                <button type="button" class="btn btn-danger" id="ID">取消</button>
            </a>
            <button type="submit" class="btn btn-success" id="ID">提交</button>
        </form>
    </div>
</body>
</html>

关键说明 #

• 视图中通过form_data字典存储用户提交的所有数据，在邮箱重复时传递给模板，确保数据回显。
• 模板中使用{{ form_data.field|default:'' }}处理初始加载时的空值，避免报错。
• 单选按钮和下拉框通过{% if %}判断选中状态，确保用户之前的选择被保留。
• 修正了原模板中未闭合的HTML标签，移除了多余的格式标记。

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