是的，带有条件的表单验证反应 js

Question

我需要根据单选按钮值验证我的字段。这是我针对该问题的示例代码我的单选按钮值是第一个单选按钮 -> values.type === "PO" 第二个单选按钮 -> values.type === "PRE"

这是我的验证class,

    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 };

当用户select第一个单选按钮时，values.type===“PO”，金额字段必须是必填的，当用户 select 第二个单选按钮 values.type === "PRE" 时，术语字段必须是强制性的。我如何将此条件应用于我的验证 class？谢谢

Answer 1

根据您的问题，您希望根据“类型”添加验证。

这是您可以尝试的代码示例：

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!",
                test: (value) => {
                  return value >= 1;
                },
              })
              .default("default term")
              .nullable()
          );
        },
      })
      .nullable()
});
export { POValidation };

Answer 2

你需要添加一个值来存储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"),
  }),
...

是的，带有条件的表单验证反应 js

yup form validation with conditions react js

validation

reactjs

yup