reactjs - YUP 验证：将字段“a”和“b”的数学值与字段“c”进行比较

Question

你好，我对 YUP 很陌生，并试图喜欢它:)

我能够让 yup 做基本的（内置）验证工作，但我似乎无法弄清楚如何进行涉及一些数学的验证。

例如，我知道您可以使用 Yup.ref('field') 和 .lessThan 来针对 field_2 验证 field_1，但是如果您想做这样的事情怎么办？

if ((field_1 * field_2} < field_3) { 返回错误 }

通过阅读文档，我知道您可以将自定义方法（即：addMethod）添加到是的，但是到目前为止我还没有使这种方法起作用。

任何帮助或指向如何以这种方式使用 addMethod 的可靠示例的链接将不胜感激。提前致谢。

Answer 1

我终于找到了一个我可以使用的例子。我在 YUP 中使用了“.test”对象并编写了一个函数。抱歉新手问题。这是我的决议：

.test('test-compare a few values', 'U suck at math (this is the failure message for the test)',
   function(value) {
    let value1 = this.resolve(Yup.ref("1st_number"));
    let value2 = this.resolve(Yup.ref("2nd_number"));
    let value3 = this.resolve(Yup.ref("3rd_number"));
    if((value1 * value2) > value3)
         return false;
    else
         return true;
    }),

Answer 2

您可以this.parent['sibling_form_field_id']在test函数内部使用 id 来检索其他表单字段的值。

所以你可以这样做：

YUP.string()
  .test('test-compare a few values', 'U suck at math (this is the failure message for the test)',
    function (value) { // beware, don't use arrow function here otherwise you would not the reference to `this` object
      let value1 = this.parent['1st_number']; // retrieve the value of the sibling form field with id `1st_number`
      let value2 = this.parent['2nd_number']; // retrieve the value of the sibling form field with id `2nd_number`
      let value3 = this.parent['3rd_number']; // retrieve the value of the sibling form field with id `3rd_number`
      if ((value1 * value2) > value3)
        return false;
      else
        return true;
    },
  );