问题描述
我需要根据单选按钮值验证我的字段。这是我针对该问题的示例代码 我的单选按钮值是 第一个单选按钮 -> values.type === "PO" 第二个单选按钮 -> values.type === "PRE"
这是我的验证类,
import * as Yup from "yup";
const Povalidation = Yup.object().shape({
purchaSEOrderNumber: Yup.object()
.required("This field is required"),amount: Yup.number()
.required("This field is required")
.typeError("Amount is required"),number: Yup.string()
.required("This field is required"),term: Yup.object()
.required("This field is required")
});
export { Povalidation };
当用户选择第一个单选按钮时,values.type === "PO",金额字段必须是强制性的, 当用户选择第二个单选按钮 values.type === "PRE" 时,术语字段必须是强制性的。我如何将此条件应用于我的验证类?谢谢
解决方法
根据您的问题,您想根据“类型”添加验证。
这是您可以尝试的代码示例:
import * as Yup from "yup";
const POValidation = Yup.object().shape({
type: Yup.string()
.required("Please select type.")
.default("default type"),amount: Yup.number()
.when("type",{
is: (isData) => {
return (
isData === "PO"
);
},then: (thendata) => {
return (
Yup.number()
.required("Please select amount.")
.test({
message: "Too Short!",test: (value) => {
return value >= 1;
},})
.default("default amount")
.nullable()
);
},})
.nullable(),term: Yup.number()
.when("type",{
is: (isData) => {
return (
isData === "PRE"
);
},then: (thendata) => {
return (
Yup.number()
.required("Please select term.")
.test({
message: "Too Short!",})
.default("default term")
.nullable()
);
},})
.nullable()
});
export { POValidation };
,
您需要添加一个值来存储 RadioButton
,我称之为 radioValue
。您需要像这样更新 POValidation
:
...
amount: Yup.number().when("radioValue",{
is: (value) => value=== "PO",then: Yup.number()
.required("This field is Required")
.typeError("Amount is required"),}),term: Yup.object().when("radioValue",{
is: (value) => value=== "PRE",then: Yup.object().required("This field is Required"),...