如何用Vuelidate实现数组验证？需至少选中一个复选框

问题分析 #

你当前使用的$each + sameAs(true)规则逻辑完全错误——它要求数组每一个元素都必须等于true，而你需要的是至少有一个元素为true，因此这个规则无法满足需求。

另外你写的自定义验证逻辑存在两个问题：

• some的普通回调函数会丢失this上下文，导致无法正确访问数组元素
• 回调函数未使用参数，错误地检查整个数组而非单个元素

正确解决方案 #

你需要给selectedDays编写一个自定义验证规则，判断数组中是否存在至少一个true值。

步骤1：编写自定义验证函数 #

在Vuelidate中，自定义验证函数接收当前字段的值（即selectedDays数组）作为参数，我们可以直接用数组的some方法实现判断：

// 自定义验证规则：检查数组是否至少包含一个true
const atLeastOneTrue = (value) => {
  if (!Array.isArray(value)) return false;
  // some(Boolean)等价于遍历数组，判断是否有元素为true
  return value.some(Boolean);
};

步骤2：整合到Vuelidate验证规则 #

将自定义规则添加到selectedDays的验证配置中，无需使用$each：

import { helpers } from '@vuelidate/core';

export default {
  data() {
    return {
      selectedDays: [false, false, false, false, false, false, false],
      daysList: [...], // 你的日期列表数据
    };
  },
  validations() {
    return {
      selectedDays: {
        atLeastOne: helpers.withMessage(
          'Пожалуйста, выберите дни тренировок',
          atLeastOneTrue
        ),
      },
    };
  },
};

步骤3：调整模板错误提示 #

模板中的错误判断可以直接沿用原来的逻辑（只要有一个验证规则失败，v$.selectedDays.$error就会为true）：

<p class="invalid-feedback mt-3" v-if="v$.selectedDays.$dirty && v$.selectedDays.$error">
  Пожалуйста, выберите дни тренировок
</p>

<template v-for="(item, index) in daysList" :key="item.id">
  <v-checkbox
    hide-details
    color="indigo"
    v-model="selectedDays[index]"
    :label="item.title"
  >
  </v-checkbox>
</template>

简化写法（可选） #

如果不想单独定义函数，也可以直接在验证规则中使用匿名函数：

validations() {
  return {
    selectedDays: {
      atLeastOne: helpers.withMessage(
        'Пожалуйста, выберите дни тренировок',
        (value) => Array.isArray(value) && value.some(Boolean)
      ),
    },
  };
},

这样就能实现需求：当数组中没有任何true值时，触发验证错误并提示用户选择至少一个训练日。

内容的提问来源于stack exchange，提问作者Almat Kaipzhanov