如何验证是否选择了单选按钮？答案

【问题标题】：How to validate if radio button is selected?如何验证是否选择了单选按钮？
【发布时间】：2021-04-29 12:48:39
【问题描述】：

我的页面中有这两个单选按钮：

<input type="radio" :id="DIGITAL_INVOICE_DIGITAL" name="digitalInvoice" :value="false" v-model="digitalInvoice"/>

<input type="radio" :id="DIGITAL_INVOICE_PAPER" name="digitalInvoice" :value="false" v-model="digitalInvoice"/>

它们不是<base-radio-list> 的一部分，我不希望它们成为。

作为使用户选择有效的一部分，它们都不是第一次选择的，因此，需要验证来检查用户是否选择。

我想使用 vee-validate 进行此验证，我该如何进行？

【问题讨论】：

标签： vue.js user-interface vee-validate

【解决方案1】：

您可以在下面找到使用 vee-validate 中的 ValidationProvider 进行的验证。

您可以在此codesandbox 之上工作。告诉我进展如何。

Test.Vue

  <template>
  <div class="columns is-multiline">
    <div class="column is-6">
      <p class="control">
        <ValidationProvider
          ref="provider"
          rules="oneOf:1,2"
          v-slot="{ errors }"
        >
          <label class="radio">
            <input
              name="digitalInvoice"
              value="1"
              type="radio"
              v-model="digitalInvoice"
            />
            Yes
          </label>
          <label class="radio">
            <input
              name="digitalInvoice"
              value="2"
              type="radio"
              v-model="digitalInvoice"
            />
            No
          </label>
          <br />
          <p class="control">
            <b>{{ errors[0] }}</b>
          </p>
        </ValidationProvider>
        <br />
      </p>
    </div>
  </div>
</template>

<script>
import { ValidationProvider, extend } from "vee-validate";
import { oneOf } from "vee-validate/dist/rules";

extend("oneOf", {
  ...oneOf,
  message: "Choose one",
});
export default {
  name: "radio-buttons-test",
  components: {
    ValidationProvider,
  },
  data() {
    return {
      digitalInvoice: false,
    };
  },
  mounted() {
    this.$refs.provider.validate();
  },
};
</script>

App.vue

<template>
  <div id="app">
    <Test />
  </div>
</template>

<script>
import Test from "./components/Test";

export default {
  name: "App",
  components: {
    Test,
  },
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

【讨论】：

@roeygol 这回答了你的问题吗？

【解决方案2】：

在Vue中，输入的值和数据对象的值是一样的。对于具有相同 v-model 的多个元素的输入单选，忽略 name 属性，数据中存储的值将等于当前选择单选输入的 value 属性。

<input type="radio" :id="DIGITAL_INVOICE_DIGITAL" :value="value1" v-model="digitalInvoice"/>
<input type="radio" :id="DIGITAL_INVOICE_DIGITAL" :value="value2" v-model="digitalInvoice"/>

你的 vue 数据是：

data: {
  digitalInvoice: "value1"
}

对于未经检查的尝试：

data: {
  digitalInvoice: ""
}

【讨论】：