检查三个复选框中是否有两个被选中

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

你"if"语句不能工作，因为:

1. 值被存储为字符串和你寻找的数字
2. 来比较两个数组这不是正确的方式，你必须循环遍历每个数组并比较每个值(查看此链接)