Question

是否有可能以与无线电组相同的方式验证Vuetify组的复选框？我尝试将它们“整体”验证，但每个复选框都单独验证。如何强制检查至少一个复选框字段？

    <template>
    <v-form v-model="valid" ref="form">
    <div v-for="(x, i) in items">
	      <v-checkbox
              :true-value="1"
              :false-value="0"
              :rules="[v => !!v || 'You must agree to continue!']"
              v-model="x"
            />
    </div>
    </v-form>
    <template>

我想只有一个强制性复选框。不是所有的人。任何一组中的复选框。

Answer 1

尝试这种方式：

<template>
   <v-form v-model="valid" ref="form">
     <div v-for="(x, i) in items">
       <v-checkbox
         :true-value="1"
         :false-value="0"
         :rules="[v => v.length > 0 || 'You must agree to continue!']"
         v-model="x"
        />
      </div>
   </v-form>
<template>

Answer 2

我知道现在意识到该线程为时已晚，但它可能会帮助想要验证数组中复选框的人

如何工作？这个概念很简单，必须在数组中至少选中一个复选框

这里index == 0，我想在第一个元素上显示错误，所以我应用了：rules 然后我要检查至少选择了一个元素，因此我决定通过alllow_validate：false在给定的以下方法中编写条件。然后在计算机中执行验证。

  <div  v-for="(checkbox , index) in yourarray" :key="index">
      <v-checkbox v-if="index==0" @change="Checkboxlist()" :rules="checkbox_rules" label="iam first checkbox" :value="checkbox.cv"></v-checkbox>
     <v-checkbox v-else  @change="Checkboxlist()" label="checkboxfinite" :value="checkbox.checkbox_value"></v-checkbox>

    </div>

2。声明数据

data(){
     yourarray:[{cv:'checkbox1'},{cv:'checkbox2'},{cv:'checkbox3'}],
    alllow_validate:false,
}

3。方法

  methods: {
  Checkboxlist(){

 this.$nextTick(() => {

    var checked=document.querySelectorAll('input[type=checkbox]:checked');

var store="";
var firstelement=false;

    for(var i=0;i<checked.length;i++){

     if(checked[i].checked==true)
     {
 this.alllow_validate=true;
if(!firstelement){
   firstelement=true;

   store=checked[i].value;

 }else{
store+=','+checked[i].value;

 this.alllow_validate=false;
 }
         }
    }

//selected checkbox value 
 alert(store);    
    })
}   
  },

3.computing

computed:{

checkbox_rules(){

const rules=[];

if(this.alllow_validate){

// alert("rule");
 const rule=
           v => (!!v) || "Field is required";
            rules.push(rule)



}
return rules;


}

Answer 3

这样的事情怎么样？

请点击此处：https://codepen.io/anon/pen/WzoVQZ

<v-form v-model="valid" ref="form">
  <p>{{ selected }}</p>
  <v-checkbox label="John" 
              v-model="selected"    
              value="John"
              ></v-checkbox>
  <v-checkbox label="Jacob" 
              v-model="selected" 
              value="Jacob"
              ></v-checkbox>
  <v-btn @click="submit">
    SUBMIT
  </v-btn>
</v-form>
<v-snackbar
  :timeout="5000"
  color="red"
  v-model="snackbar"
  >
  Please select at least one checkbox.
  <v-btn dark flat @click.native="snackbar = false">Close</v-btn>
</v-snackbar>



data: () => ({
    //
    snackbar:false,
    selected:['John'],
  }),
   methods: {
      submit () {

        if (this.selected.length > 0){
          this.snackbar = true;
        }

      }
   }

Vuetify - 如何正确验证组复选框

3 个答案: