Question

我在一个表单中有 3 个字段，“类型”字段是从该列表中选择的，某些项目启用或禁用“输出”字段，如果启用，我需要“输出”字段小于“ in”字段，反之亦然，但如果“out”字段被禁用，我不需要该验证，我正在尝试使用 .when 进行某些操作，但不起作用，关于如何执行此操作的任何想法？

  const [disableOutCounterField, setDisableOutCounterField] = useState(false);

  const schema = yup.object().shape({
    type: yup.string().required(requiredMessage),
    in: yup
      .number(numberMessage)
      .required(requiredMessage)
      .integer(integerMessage)
      .min(1, positiveMessage)
      .typeError(numberMessage)
      .when("out", {
        is: !disableOutCounterField,
        then: yup.number().moreThan(yup.ref("out"), moreThanMessage),
        message: moreThanMessage,
      }),
    out: yup
      .number(numberMessage)
      .integer(integerMessage)
      .typeError(numberMessage)
      .lessThan(yup.ref("in"), lessThanMessage),
  });

Answer 1

结构：

.when("out", {
  is: !disableOutCounterField,

将 out 值与 !disableOutCounterField 进行比较，如果它们相等，则应用 then 规则。但很可能它们永远不会相同。

此处需要的检查只是 !disableOutCounterField 本身的值，对于 out 的任何值。这可以使用表达式来完成：

.when("out", {
  is: value => !disableOutCounterField,

换句话说：对于每个 out 值，返回 !disableOutCounterField，如果返回 true，则应用 then 部分。

yup 条件验证

1 个答案: