Vee 验证如何验证单选按钮答案

【问题标题】：Vee validate how to validate radio buttonsVee 验证如何验证单选按钮
【发布时间】：2023-04-06 13:15:01
【问题描述】：

从 VeeValidate 可用规则中，您可以使用 oneOf VeeValidate Rules 验证选择

<ValidationProvider rules="oneOf:1,2,3" name="number" v-slot="{ errors }">
  <select v-model="value">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four (invalid)</option>
  </select>
  <span>{{ errors[0] }}</span>
</ValidationProvider>

但我不知道如何用单选框做到这一点

<ValidationProvider rules="oneOf:1,2,3" name="choice" v-slot="{ errors }">
    <label>
      <input type="radio" value="1" v-model="choice">
      One
    </label>
    <label>
      <input type="radio" value="2" v-model="choice">
      One
    </label>
    <label>
      <input type="radio" value="3" v-model="choice">
      One
    </label>
                
   <span>{{ errors[0] }}</span>
   </ValidationProvider>

我正在使用 nuxt

import { extend } from 'vee-validate';
import { oneOf } from 'vee-validate/dist/rules';

// Add the required rule
extend('oneOf ', {
  ...oneOf ,
  message: 'Choose one'
});

数据和组件

data () {
      return {
        choice: ''
  }
}

components: {
    ValidationObserver: ValidationObserver,
    ValidationProvider: ValidationProvider
  },

VeeValidate 适用于所有其他输入

【问题讨论】：

标签： vue.js nuxt.js vee-validate

【解决方案1】：

已编辑

我这样做的方法是将 ValidationProvider 包裹在最后一个无线电输入周围。像这样：

<label>
  <input type="radio" value="1" v-model="choice">
    One
</label>
<label>
  <input type="radio" value="2" v-model="choice">
    Two
</label>
<ValidationProvider rules="oneOf:1,2,3" name="choice" v-slot="{ errors }">
  <label>
    <input type="radio" value="3" v-model="choice">
      Three
   </label>
  <span>{{ errors[0] }}</span>
</ValidationProvider>

之前我将validationProvider 包裹在每个无线电输入周围，但我发现如果多个validationProvider 使用相同的名称，则实际上只有最后一个得到验证。

【讨论】：