检查三个复选框中的两个是否已被选中 Vue JS

Question

我有一个带有模型验证功能的 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 仍然可以一起选择，每当我尝试提交表单时，它只显示检查已通过。有谁知道如何解决这个问题？谢谢！

Answer 1

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

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

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

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

检查三个复选框中的两个是否已被选中 Vue JS

Check if two of three checkboxes have been selected Vue JS

javascript

vue.js

vue-component

vuejs2

antd