Reactjs和Yup，reacthook表单集成的问题

Question

我正在使用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文档让我头晕目眩。我知道它不起作用，因为我可以在未选中所有字段的情况下提交表单。有人能帮助我理解如何正确地编写这个自定义验证器吗？

Answer 1

发现此问题，已根据您的需要进行了修改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 ", null, "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, padding: 0, margin: 0 }}>
Check - Choice 2
<input type="checkbox" name="choice2" ref={register} />
</label>
<label style={{ lineHeight: 1, padding: 0, margin: 0 }}>
Check - Choice 3
<input type="checkbox" name="choice3" ref={register} />
</label>
{errors.choices && <p>{errors.choices.message}</p>}
</div>

Answer 2

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

react钩子表单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),
});