是的 - 验证只有 1 个复选框被选中答案

【问题标题】：Yup - validating only 1 checkbox is checked是的 - 验证只有 1 个复选框被选中
【发布时间】：2021-12-13 15:44:06
【问题描述】：

我有一个带有 2 个复选框的表单 - 约束是最多可以选中 1 个复选框。也就是说，这两个复选框都不能选中。

我在表单中添加了逻辑以在选中 1 时禁用另一个复选框。但我也想验证一下。

我的尝试是这样的：

yup.object().shape({
  textInput: yup.string().trim().required('Text input is required.'),
  checkbox1: yup.boolean()
    .when('checkbox2', {
      is: true,
      then: yup.boolean().isFalse()
    }),
  checkbox2: yup.boolean()
    .when('checkbox1', {
      is: true,
      then: yup.boolean().isFalse()
    }),
}, [[ 'checkbox1', 'checkbox2' ]])

但这会导致奇怪的行为 - 当第一个被检查时，它似乎返回一个错误的验证，然后第二个被检查。但如果第二个被检查，然后第一个被检查，则不会返回错误验证。

是否可以进行这样的验证？

【问题讨论】：

标签： javascript validation yup

【解决方案1】：

我不会使用复选框，而是使用输入 type="radio"。这只允许选择其中一个选项。以下是来自 w3schools.com 的一些示例文档。

https://www.w3schools.com/tags/att_input_type_radio.asp

【讨论】：

问题是我也需要允许没有被检查。
您可以使用重置按钮重置它们。 https://www.w3schools.com/tags/att_input_type_reset.asp
不是我想要的。 2 个复选框是不同的项目（我可以添加第三个复选框，独立于其他 2 个） - 单选按钮在这里并不适合。表单中有逻辑以禁用复选框，然后选择复选框，反之亦然。但我正在尝试使用yup 验证是否只选择了 1 - 这就是这里的问题。
好的，很抱歉这没有帮助。

【解决方案2】：

正如另一个答案中提到的，您可以使用无线电输入类型，因为它是理想的选择。

但是，如果您只想要复选框，请查看此link。它有许多有趣的方法。

【讨论】：