验证失败时保持单选按钮（radio button）选中状态功能异常

这个问题我之前做内容管理系统的时候也踩过坑！核心问题就是表单验证失败后，页面没有正确记住用户之前选中的单选按钮状态，导致默认回到了「创建新post」，但表单里还留着错误的内容，特别违和。下面分两种常见场景给你具体的解决思路：

后端服务端渲染场景（比如PHP、Django、Laravel这类） #

这种情况里，页面是后端动态生成的，验证失败后会重新渲染页面，所以关键是把用户提交时选中的单选按钮值存在请求上下文里，渲染时根据这个值来标记checked属性。

举个Django模板的例子，你可以参考这个逻辑：

<!-- 遍历已有post生成单选按钮 -->
{% for post in posts %}
  <div class="radio-item">
    <input 
      type="radio" 
      name="post_option" 
      id="post-{{ post.id }}" 
      value="{{ post.id }}"
      <!-- 判断提交的选项是否等于当前post的ID，是的话加checked -->
      {% if request.POST.post_option == post.id|stringformat:"i" %}checked{% endif %}
    >
    <label for="post-{{ post.id }}">{{ post.title }}</label>
  </div>
{% endfor %}

<!-- 创建新post的单选按钮 -->
<div class="radio-item">
  <input 
    type="radio" 
    name="post_option" 
    id="post-new" 
    value="new"
    <!-- 如果没有提交值，或者提交的是new，就保持选中 -->
    {% if not request.POST.post_option or request.POST.post_option == "new" %}checked{% endif %}
  >
  <label for="post-new">创建新post</label>
</div>

这里要注意两个细节：

• 所有单选按钮的name必须完全一致，这样浏览器才会把它们归为同一组，互斥选中。
• 要处理类型匹配问题：比如post的ID是数字，但POST请求里的参数是字符串，所以需要用stringformat转成字符串再比较，避免因为类型不匹配导致判断失败。

前端单页应用场景（Vue/React等） #

这类场景下页面不会刷新，问题通常出在验证失败时不小心重置了单选按钮绑定的状态变量。解决思路是用一个状态变量维护选中的选项，验证失败时不要重置这个变量。

拿Vue举个例子：

<template>
  <div class="post-form-container">
    <!-- 已有post单选按钮组 -->
    <div v-for="post in postsList" :key="post.id">
      <input
        type="radio"
        :value="post.id"
        v-model="selectedPostKey"
        @change="fillPostForm(post)"
      >
      <label>{{ post.title }}</label>
    </div>

    <!-- 创建新post单选按钮 -->
    <input
      type="radio"
      value="new_post"
      v-model="selectedPostKey"
      @change="clearPostForm"
    >
    <label>创建新post</label>

    <!-- 表单区域 -->
    <form @submit.prevent="handleFormSubmit">
      <input v-model="formData.title" placeholder="请输入标题" />
      <textarea v-model="formData.content" placeholder="请输入内容"></textarea>
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      postsList: [], // 从后端接口获取的已有post列表
      selectedPostKey: "new_post", // 初始选中创建新post
      formData: { title: "", content: "" },
    };
  },
  methods: {
    fillPostForm(post) {
      // 填充选中的post信息到表单
      this.formData = { ...post };
    },
    clearPostForm() {
      // 清空表单
      this.formData = { title: "", content: "" };
    },
    async handleFormSubmit() {
      // 前端先做基础验证
      if (!this.formData.title.trim()) {
        alert("标题不能为空！");
        return; // 验证失败，直接返回，不修改selectedPostKey
      }

      try {
        // 提交到后端
        await fetch("/api/post/submit", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            option: this.selectedPostKey,
            ...this.formData,
          }),
        });
        // 提交成功后的逻辑，比如跳转到列表页或者清空表单
      } catch (err) {
        alert("提交失败，请稍后重试");
        // 后端返回错误时，也不要修改selectedPostKey，保持之前的选中状态
      }
    },
  },
  mounted() {
    // 页面加载时获取已有post列表
    this.fetchPosts();
  },
};
</script>

这里的核心是：不管是前端验证失败还是后端返回错误，都不要去修改selectedPostKey这个变量，这样单选按钮的选中状态就会一直保持用户之前选择的选项。

通用注意事项 #

• 不管是哪种场景，都要确保单选按钮的选中状态和表单内容是联动的，比如选中已有post时填充内容，选中创建新post时清空内容，这个逻辑要稳定。
• 如果是后端渲染，还要确保在验证失败时，把用户填写的表单内容也回显到表单字段里，这样用户体验才完整。

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