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

如何解决是的，带条件的表单验证反应 js

我需要根据单选按钮值验证我的字段。这是我针对该问题的示例代码 我的单选按钮值是 第一个单选按钮 -> 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"),...