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

时间:2018-11-14 18:57:53

标签: reactjs formik yup

您好,我对YUP并不陌生,并尝试喜欢它:)

我可以做一些基本的(内置的)验证工作,但似乎无法弄清楚如何进行涉及数学的验证。

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

如果(((field_1 * field_2}

通过阅读文档,我知道您可以向yup添加自定义方法(即:addMethod),但是到目前为止,我仍然无法使这种方法起作用。

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

2 个答案:

答案 0 :(得分:2)

我终于找到了可以使用的示例。我在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;
    }),

答案 1 :(得分: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;
    },
  );