问题描述
我正在使用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),});