Vue表单中Radio按钮添加required属性仍报错的问题求助

问题出在你的两个单选按钮name属性不一致：第一个radio的name是manager，第二个是author，浏览器会把它们识别成两个独立的单选组，所以即使你选择了其中一个，另一个未选择的radio的required规则依然会触发，导致提交时提示“至少选择一项”。

修复步骤： #

• 将两个单选按钮的name属性改为相同值（比如统一为role），这样浏览器才会把它们归为同一组单选控件
• 单选组只需要在其中一个控件上添加required属性即可（当然都加也不影响，但没必要重复）

修改后的代码示例：

<form class="HandleUsers__form" action="" method="post" @submit.prevent="addAdmin">
  ...
    <div>
        <legend>角色选择</legend>
        <div>
            <input type="radio" name="role" value="manager" id="manager" v-model="role" required>
            <label for="manager">Manager</label>
        </div>
        <div>
            <input type="radio" name="role" value="author" id="author" v-model="role">
            <label for="author">Author</label>
        </div>
    </div>
 
...
</form>

原理说明： #

单选按钮的核心关联逻辑是通过name属性实现的，同一组的单选按钮必须拥有相同的name，这样浏览器才会知道它们是互斥选择的关系，此时required属性会作用于整个组，只要组内有一个选项被选中，就满足验证要求。

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