Reactjs和Yup，ReactHook表单集成存在问题

我正在使用yup和react钩子表单来验证用户提交。我正在创建一个发送短信、电子邮件和推送通知的应用程序。用户可以通过一组复选框指定联系他们的地点。这3个复选框更新一个有状态对象，默认情况下如下所示：

  const [checkboxes, setCheckboxes] = useState({
    phone: false,
    email: false,
    push: false,
  });

在提交表单之前，我需要验证其中至少有一个已更改为true，如果没有，我希望在消息中抛出一个错误。为此，我找到了yup的.test函数，并尝试以下操作：

  fieldset: yup
    .object()
    .shape({
      phone: yup.bool(),
      email: yup.bool(),
      push: yup.bool(),
    })
    .required()
    .test(
      "comms-Selected",
      "Please specify at least one means to be contacted",
      (value) =>
        value.phone === true || value.email === true || value.push === true
    ),

---

我不确定这个验证器函数的语法，yup文档让我头晕目眩。我知道它不起作用，因为我可以提交所有字段都未选中的表单。有人能帮助我了解如何正确编写此自定义验证器吗？

发现此问题，已进行修改以满足您的需要

HTML

选择1
选择2
选择3
{errors.choices&&{errors.choices.message}
}

感谢您的回复和回答。我发现了问题所在。我的语法很好。昨天晚上，我在醉醺醺中意外地将react hook表单更新为一个新版本，而在新版本中，有第二个依赖项，并且声明yup解析器的语法略有不同。瞧，添加依赖项并更改代码中的一行使我上面的原始代码正常工作。对于同一艘船上的任何人，请查阅react hook表单文档！他们与模式验证器的集成发生了微小的变化

react hook表单5.x.x的原始行和依赖项：

import { useForm } from "react-hook-form";
import * as yup from "yup";

  const { register, handleSubmit, setValue, errors } = useForm({
    validationSchema: ContactSchema, //name of your schema goes here
  });

修改了反应钩表6.x.x：

import { useForm } from "react-hook-form";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";

  const { register, handleSubmit, setValue, errors } = useForm({
    resolver: yupResolver(ContactSchema),
  }); 

---

模式在我看来很好，如何将其与表单连接起来？您在验证对象时是否遇到错误（

{phone:false，email:false，push:false}

）。它与handleSubmit函数连接，该函数适用于我的其他字段，但不适用于自定义验证器。我想知道是否需要使用if语句而不是最后一行的表达式，然后使用else语句来手动创建并分配错误，如果没有任何复选框计算为true。

import { useForm } from "react-hook-form";
import * as yup from "yup";

  const { register, handleSubmit, setValue, errors } = useForm({
    validationSchema: ContactSchema, //name of your schema goes here
  });

import { useForm } from "react-hook-form";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";

  const { register, handleSubmit, setValue, errors } = useForm({
    resolver: yupResolver(ContactSchema),
  });