动态单选按钮验证：提交前检查单选按钮是否选中的实现方法

没问题，我来帮你搞定这个单选按钮验证的问题～ 咱们分两步来：前端给用户即时反馈，后端做安全兜底，这样既友好又安全。

一、前端JavaScript验证（即时提示用户） #

首先给你的表单加个ID，方便JS定位，然后添加提交事件监听，检查是否有单选按钮被选中：

修改模板里的表单标签：

<form id="delete-laptop-form" action="{% url 'laptops:delete' %}" method="post" enctype="multipart/form-data">
  {% csrf_token %}
  {% for laptop in laptops %}
    <div class="radio">
      <input type="radio" id="laptop_{{laptop.id}}" name="laptopname" value="{{laptop.id}}">
      <label for="laptop_{{laptop.id}}">{{laptop}}</label>
    </div>
  {% endfor %}
  <!-- 提交按钮 -->
  <button type="submit">删除选中的笔记本</button>
</form>

<!-- 添加验证脚本 -->
<script>
document.getElementById('delete-laptop-form').addEventListener('submit', function(e) {
  // 获取所有name为laptopname的单选按钮
  const radioButtons = document.querySelectorAll('input[name="laptopname"]');
  // 检查是否有被选中的选项
  const hasCheckedOption = Array.from(radioButtons).some(radio => radio.checked);

  if (!hasCheckedOption) {
    e.preventDefault(); // 阻止表单提交
    alert('请先选择一台笔记本电脑再提交哦！');
    // 你也可以替换成更美观的页面内提示，比如在表单上方显示红色文字
  }
});
</script>

这段代码的作用是：用户点击提交时，先检查所有单选按钮是否有选中的，如果没有就阻止提交，并弹出提示告诉用户。

二、后端Django验证（安全兜底） #

前端验证可以被绕过（比如用户禁用JS），所以必须在后端视图里再加一层验证：

修改你的delete视图函数：

from django.shortcuts import redirect
from django.contrib import messages
# 导入你的Laptop模型
from .models import Laptop

def delete(request):
    if request.method == 'POST':
        # 获取选中的笔记本ID
        selected_laptop_id = request.POST.get('laptopname')
        
        # 检查是否有选中的ID
        if not selected_laptop_id:
            messages.error(request, '请选择要删除的笔记本电脑！')
            # 重定向回笔记本列表页面（替换成你的URL名称）
            return redirect('laptops:laptop-list')
        
        # 执行删除逻辑
        try:
            laptop = Laptop.objects.get(id=selected_laptop_id)
            laptop.delete()
            messages.success(request, '笔记本电脑已成功删除！')
        except Laptop.DoesNotExist:
            messages.error(request, '选中的笔记本不存在！')
        
        return redirect('laptops:laptop-list')
    
    # 如果是GET请求，直接重定向回列表页
    return redirect('laptops:laptop-list')

然后在你的模板（比如列表页面）里添加消息提示的代码，让用户能看到后端返回的提示：

<!-- 放在页面顶部合适的位置 -->
{% if messages %}
  {% for message in messages %}
    <div class="alert alert-{{ message.tags }}">
      {{ message }}
    </div>
  {% endfor %}
{% endif %}

这样就算用户绕过了前端验证，后端也会拦截请求并提示用户选择要删除的笔记本。

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