Vue+Ant Design表单：禁止同时选构建阶段2、3的校验规则不生效问题

问题根因 #

校验不生效由两个核心错误导致：

• JS中数组为引用类型，不能直接用===做相等判断，[2,3] === [2,3]永远返回false，因为两个数组对应不同的内存地址
• 模板里复选框的value是字符串类型的"2"、"3"，你校验时判断的是数字2、3，类型不匹配
• 额外注意：若checkPending变量未在当前作用域声明，可能引发全局变量污染或报错

修复方案 #

第一步：修改自定义校验规则 #

data() {
  // 先在当前作用域声明定时器变量，避免全局污染
  let checkPending = null
  let checkModuleStage = (rule, value, callback) => {
      clearTimeout(checkPending);
      checkPending = setTimeout(() => {
        // 转成数字后判断是否同时包含2和3，不用关心数组顺序
        const stageList = value.map(Number)
        if (stageList.includes(2) && stageList.includes(3)) {
          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" },
          ],
    }
  }
}

可选优化（减少类型转换逻辑） #

将模板中复选框的value改为数字绑定，不需要再做类型转换：

<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>

此时校验逻辑里可以去掉map(Number)的转换步骤，直接判断value.includes(2) && value.includes(3)即可。

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