VueJS 2中多选框校验问题：实现至少勾选一个选项的表单验证

你的代码当前存在的问题：给每个Checkbox单独绑定了required属性和独立校验规则，这会导致每个Checkbox都被强制要求勾选，不符合“至少勾选一个”的需求。

以下是两种可行的解决方案：

方案一：利用Vuetify表单容器的统一校验 #

适合使用Vuetify框架的场景，借助v-form的全局规则实现校验：

修改后的HTML代码 #

<v-form ref="checkboxForm" :rules="checkboxGroupRules">
  <div class="d-flex">
    <v-checkbox
      v-model="checkboxOptionHydro"
      class="ml-3 secondary--text"
      label="Hydro"
      color="accent"
    />
    <v-checkbox
      v-model="checkboxOptionWind"
      class="ml-3 secondary--text"
      label="Wind"
      color="accent"
    />
  </div>
</v-form>

对应的JS代码 #

data: () => ({
  checkboxOptionHydro: false,
  checkboxOptionWind: false,
  checkboxGroupRules: [
    () => {
      // 判断两个选项是否至少有一个被勾选
      return this.checkboxOptionHydro || this.checkboxOptionWind || "请至少选择一个选项"
    }
  ]
}),
methods: {
  validateForm() {
    // 手动触发表单校验
    const isValid = this.$refs.checkboxForm.validate();
    if (isValid) {
      // 校验通过后的逻辑
    }
  }
}

方案二：手动校验（无需依赖表单容器） #

如果不需要表单容器的自动校验逻辑，可以手动判断并显示错误：

修改后的HTML代码 #

<div class="d-flex">
  <v-checkbox
    v-model="checkboxOptionHydro"
    class="ml-3 secondary--text"
    label="Hydro"
    color="accent"
  />
  <v-checkbox
    v-model="checkboxOptionWind"
    class="ml-3 secondary--text"
    label="Wind"
    color="accent"
  />
</div>
<!-- 错误提示 -->
<span class="error--text" v-if="checkboxError">{{ checkboxError }}</span>

对应的JS代码 #

data: () => ({
  checkboxOptionHydro: false,
  checkboxOptionWind: false,
  checkboxError: ""
}),
methods: {
  checkCheckboxGroup() {
    if (!this.checkboxOptionHydro && !this.checkboxOptionWind) {
      this.checkboxError = "请至少选择一个选项";
      return false;
    }
    this.checkboxError = "";
    return true;
  },
  submit() {
    if (this.checkCheckboxGroup()) {
      // 提交逻辑
    }
  }
}

内容的提问来源于stack exchange，提问作者Dhioll fernandes