如何解决如何验证单选按钮是否被选中?
我的页面中有这两个单选按钮:
<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 进行此验证,我该怎么做?
解决方法
您可以在下面找到使用来自 vee-validate 的 ValidationProvider 的验证。
您可以在此 codesandbox 之上工作。 让我知道进展如何。
测试.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>
,
在Vue中,输入的值和数据对象的值是一样的。 对于具有相同 v-model 的多个元素的 input radios,name 属性将被忽略,data 中存储的值将等于当前选择的 radio input 的 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: ""
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。