React Formik Yup 验证用于检查小于数字的输入值

Question

我有一个使用 Formik 构建的表单。表单中有两个单选按钮，当单击一个单选按钮时，将出现一个输入字段。我需要使用 Yup 验证来验证该输入字段。该值应小于 9999.99，它也可以接受整数和小数值。我试过的代码如下：

Form.js

<RadioGroup
                    name="callBackSelectionType"
                    initialValues={[
                      {
                        value: CALLBACKREQUIRED,
                        label: "Lower callback limit",
                      },
                      {
                        value: REMOVECALLBACK,
                        label: "Reset to default ,000",
                      },
                    ]}
                  />
                  {values["callBackSelectionType"] === CALLBACKREQUIRED && (
                    <div className="fields-container">
                      <InputField
                        label={CALLBACK_LIMIT}
                        name="greaterThan"
                        placeholder="[=10=].00 to ,999.99"
                        errorMessage={getRequiredMessage(CALLBACK_LIMIT)}
                      />
                    </div>
                  )}

Schema.js

const schema = yup.object().shape({
  callBackSelectionType: yup.string().required(),
  greaterThan: yup.string().when("callBackSelectionType", (val, schema) => {
    if (val === "CALLBACKREQUIRED") {
      return yup
        .number()
        .label(Labels.CALLBACKLIMIT)
        .lessThan(9999.99, "Limit should be less than 9999.99")
        .required(Messages.REQUIRED_FIELD);
    }
    else return yup.string().notRequired();
  }),
});

此验证适用于必填字段，但不适用于应接受十进制且应小于 9999.99 的条件。请帮忙.

提前致谢

Answer 1

你可以尝试使用 .max(9999.99, "Commission should not be more than 2 digits") 吗？

React Formik Yup 验证用于检查小于数字的输入值

React Formik Yup validation for checking input value less than a number

forms

validation

reactjs

yup

formik

Form.js

Schema.js