检查是否选择了三个复选框中的两个 Vue JS答案

【问题标题】：Check if two of three checkboxes have been selected Vue JS检查是否选择了三个复选框中的两个 Vue JS
【发布时间】：2021-10-20 01:24:12
【问题描述】：

我有一个带有模型验证功能的 Ant Design 表单。它有三个复选框：

<a-form-model-item has-feedback label="CI/CD Stages" prop="stage">
   <a-checkbox-group v-model="form.stage">
     <a-checkbox value="1" name="stage"> Build Stage 1</a-checkbox>
     <a-checkbox value="2" name="stage"> Build Stage 2</a-checkbox>
     <a-checkbox value="3" name="stage"> Build Stage 3 </a-checkbox>
   </a-checkbox-group>
</a-form-model-item>

我希望在选择 Build Stage 2 和 Build Stage 3 时验证失败。

data() {
  ...
  let checkModuleStage = (rule, value, callback) => {
      clearTimeout(checkPending);
      checkPending = setTimeout(() => {
        if (value === [2, 3] || value === [3, 2]) {
          callback(
            new Error(
              "You have selected both Stage 2 and Stage 3. Only one can be selected:"
            )
          );
        } else {
          callback();
        }
      }, 1000);
}
return {
  rules: {
    stage: [
          {
            type: 'array',
            required: true,
            message: 'Please select at least one stage',
            trigger: 'change',
          },
          { validator: checkModuleStage, trigger: "change" },
        ],
  }
}

但是现在仍然可以同时选择 2 和 3，每当我尝试提交表单时，它只会显示检查已通过。有谁知道如何解决这个问题？谢谢！

【问题讨论】：

如果同时检查阶段 2 和阶段 3，当调用 checkModuleStage 时，value 参数的实际值是多少？是["2", "3"]（带字符串值）的排列吗？
是的，结果应该是两个字符串，例如["2", "3"]。下面的答案解决了它。

标签： javascript vue.js vuejs2 vue-component antd

【解决方案1】：

您必须将 checkModuleStage 下的 if 语句更改为：

if (value.some((x) => x === "2") && value.some((x) => x === "3"))

你的“if”语句不起作用，因为：

值存储为字符串，您正在寻找数字
要比较两个不正确的数组，您必须遍历每个数组并比较每个值（查看此link）

【讨论】：