Reactjs和Yup，react-hook-form集成问题

如何解决Reactjs和Yup，react-hook-form集成问题

我正在使用yup和react-hook-forms来验证用户提交的内容。我正在创建一个发送短信，电子邮件和推送通知的应用程序。用户可以通过一组复选框指定要联系的地方。这三个复选框将更新默认情况下看起来像这样的单个有状态对象：

  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文档使我头疼。我知道它不起作用，因为我可以提交所有未选中字段的表单。有人可以帮助我了解如何正确编写此自定义验证器吗？

解决方法

发现了此问题，对其进行了修改以满足您的需求 https://github.com/jquense/yup/issues/72

let SignupSchema = yup.object().shape({
  firstName: yup.string().required(),age: yup.number().required().positive().integer(),// website: yup.string().url(),choice1: yup.boolean(),choice2: yup.boolean(),choice3: yup.boolean()
});

// extend the existing schema for the choice validation
SignupSchema = SignupSchema.test(
  // this test is added additional to any other (build-in) tests
  "choicesTest",null,(obj) => {
    // only testing the checkboxes here
    if (obj.choice1 || obj.choice2 || obj.choice3) {
      return true; // everything is fine
    }

    return new yup.ValidationError("Check at least one ","choices");
  }
);

HTML

<div>
  <label style={{ lineHeight: 1,padding: 0,margin: 0 }}>
    Check - Choice 1
    <input type="checkbox" name="choice1" ref={register} />
  </label>
  <label style={{ lineHeight: 1,margin: 0 }}>
    Check - Choice 2
    <input type="checkbox" name="choice2" ref={register} />
  </label>
  <label style={{ lineHeight: 1,margin: 0 }}>
    Check - Choice 3
    <input type="checkbox" name="choice3" ref={register} />
  </label>
  {errors.choices && <p>{errors.choices.message}</p>}
</div>

,

感谢您的答复和回答。我发现了问题。我的语法很好。原来是一个醉汉，我昨晚不小心将react-hook-form更新为一个新版本，而在新版本中，存在第二个依赖项，并且用于声明您的yup解析器的语法略有不同。瞧，添加依赖项并更改代码中的一行导致上面的原始代码正常工作。对于同一条船上的任何人，请查阅react-hook-form文档！它们与模式验证器的集成变化很小！

react-hook-form 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
  });

针对react-hook-form 6.x.x进行了修订：

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

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