使用Tailwind CSS自定义Django表单后无法保存数据的问题

常见问题点及修复方案 #

1. 遗漏CSRF令牌 #

Django表单提交必须携带CSRF令牌，自定义表单时容易忽略这一点。

• 修复：在<form>标签内添加{% csrf_token %}

2. 字段name属性不匹配 #

自定义输入框的name属性必须与Django表单字段的名称完全一致，否则后端无法识别并接收数据。

• 错误示例：

<input type="text" class="..." id="id_username" placeholder="用户名">

• 正确示例：

<input type="text" class="..." id="id_username" name="username" placeholder="用户名">

3. 表单标签参数错误 #

确保<form>标签的method设为post，action指向正确的视图路由。

• 正确写法：

<form method="post" action="{% url '你的表单视图名称' %}">
  {% csrf_token %}
  <!-- 自定义字段内容 -->
</form>

4. 未关联表单实例属性 #

手动渲染字段时，需调用表单实例的属性（如{{ form.field.name }}、{{ form.field.errors }}），避免因字段验证失败导致数据无法保存。

• 示例：

<div class="mb-4">
  <label for="{{ form.username.id_for_label }}" class="block text-sm font-medium text-gray-700">
    {{ form.username.label }}
  </label>
  <input type="text" name="{{ form.username.name }}" id="{{ form.username.id_for_label }}" 
         value="{{ form.username.value|default:'' }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">
  {% if form.username.errors %}
    <p class="mt-1 text-sm text-red-600">{{ form.username.errors.0 }}</p>
  {% endif %}
</div>

5. 视图未正确处理POST请求 #

确保视图中正确判断请求方法，调用表单的is_valid()方法，验证通过后执行保存操作。

• 视图示例：

# views.py
from django.shortcuts import render, redirect
from .forms import 你的表单类

def 表单视图(request):
    if request.method == 'POST':
        form = 你的表单类(request.POST)
        if form.is_valid():
            form.save()
            return redirect('成功页路由')
    else:
        form = 你的表单类()
    return render(request, '你的模板.html', {'form': form})

完整代码示例（修复后） #

HTML模板 #

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="max-w-md mx-auto mt-10">
  <form method="post" action="{% url 'profile_submit' %}">
    {% csrf_token %}
    
    <!-- 用户名字段 -->
    <div class="mb-4">
      <label for="{{ form.username.id_for_label }}" class="block text-sm font-medium text-gray-700">
        {{ form.username.label }}
      </label>
      <input type="text" name="{{ form.username.name }}" id="{{ form.username.id_for_label }}" 
             value="{{ form.username.value|default:'' }}" 
             class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
      {% if form.username.errors %}
        <p class="mt-1 text-sm text-red-600">{{ form.username.errors.0 }}</p>
      {% endif %}
    </div>

    <!-- 邮箱字段 -->
    <div class="mb-4">
      <label for="{{ form.email.id_for_label }}" class="block text-sm font-medium text-gray-700">
        {{ form.email.label }}
      </label>
      <input type="email" name="{{ form.email.name }}" id="{{ form.email.id_for_label }}" 
             value="{{ form.email.value|default:'' }}" 
             class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
      {% if form.email.errors %}
        <p class="mt-1 text-sm text-red-600">{{ form.email.errors.0 }}</p>
      {% endif %}
    </div>

    <button type="submit" class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-md">
      提交
    </button>
  </form>
</body>
</html>

models.py #

from django.db import models

class UserProfile(models.Model):
    username = models.CharField(max_length=100, unique=True)
    email = models.EmailField(unique=True)

    def __str__(self):
        return self.username

forms.py #

from django import forms
from .models import UserProfile

class UserProfileForm(forms.ModelForm):
    class Meta:
        model = UserProfile
        fields = ['username', 'email']

views.py #

from django.shortcuts import render, redirect
from .forms import UserProfileForm

def profile_submit(request):
    if request.method == 'POST':
        form = UserProfileForm(request.POST)
        if form.is_valid():
            form.save()
            return redirect('success')
    else:
        form = UserProfileForm()
    return render(request, 'profile_form.html', {'form': form})

def success(request):
    return render(request, 'success.html')

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