Vue3中使用vee-validate（yup）实现radio单选框验证失效问题

问题原因梳理 #

• 输入框类型配置错误：需求是单选框，代码里写的type="checkbox"为复选框类型，和业务需求以及校验规则不匹配
• 未绑定vee-validate暴露的字段属性：<Field>组件插槽返回的field对象包含了值绑定、事件监听的相关属性，你的代码未将这些属性绑定到input上，而是自行绑定了v-model="events"，导致vee-validate无法监听到选项值的变化，自然无法触发校验
• 单选选项数量不足：你的yup规则限定可选值为value1、value2两个，代码中只写了一个输入框，也不符合规则要求
• 遗漏Form组件包裹：vee-validate的所有Field组件必须放在Form组件内部，且Form要绑定对应的校验Schema，否则全局校验逻辑不会生效

修正后代码示例 #

校验规则（无需修改） #

const schema = yup.object({
  myradio: yup.string().oneOf(['value1', 'value2']).required()
})

模板代码 #

<Form :validation-schema="schema" v-slot="{ handleSubmit }">
  <Field v-slot="{ field, errorMessage }" name="myradio">
    <VField>
      <VControl>
        <!-- 绑定field属性，类型改为radio，value对应规则内的可选值 -->
        <input id="option1" v-bind="field" type="radio" value="value1" />
        <label for="option1">选项一</label>

        <input id="option2" v-bind="field" type="radio" value="value2" />
        <label for="option2">选项二</label>
      </VControl>
    </VField>
    <!-- 错误提示展示 -->
    <p class="error" v-if="errorMessage">{{ errorMessage }}</p>
  </Field>
  <button type="submit" @click="handleSubmit(你的提交处理方法)">提交表单</button>
</Form>

可选：手动控制v-model的写法 #

如果你需要自行维护单选框的绑定变量，需要手动同步状态给vee-validate：

<input 
  id="option1" 
  v-model="yourCustomVariable" 
  type="radio" 
  value="value1"
  @change="field.onChange"
  @blur="field.onBlur"
/>

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