YUP 验证——如何获取值

Question

我得到了以下代码：

    name: yup
      .string()
      .trim()
      .required(message("nameMissing"))
      .max(40, message("nameTooLongWithStatus", {
        length: (HERE I NEED HELP),
      })),

参考我写"HERE I NEED HELP"那一行。我希望它是这样的：name.toString().length

但这显然行不通，实际上我试过的都没有用。我只是想获取 'name' 的值并获取它的长度，仅此而已。

所以想法是，"name" 应该是一个最多 40 个字符的字符串。如果超过 40，将显示一条消息说 "The maximum character count is 40 (current length)"，其中当前长度是您作为输入提供的名称。

message("nameTooLongWithStatus" 将接受一个参数 "length" 并将构造所述消息。

Answer 1

没那么简单，但您需要使用 .test 方法，进行自己的验证并调用 this.createError 传递 message 以及您将从 [= 收到的值11=].

name: yup
  .string()
  .trim()
  .required(message("nameMissing"))
  .test('test_length_greater_than_40', '', function(value){
      // your condition
      if(value && value.toString().length > 40){
          // setting the error message using the value's length
          return this.createError({ message: `someErrorMessage ${value.toString().length}` })
      }
      return true
  }),

还有其他方法可以做到这一点，比如设置 params 并将其放入 message（这是 test 的第二个参数）。如果你想那样做，你可以看看文档，但它几乎是一样的。

另请注意文档中的这一点

Please note that to use the this context the test function must be a function expression (function test(value) {}), not an arrow function, since arrow functions have lexical context.

Answer 2

您可以利用长度的消息第二个参数获利：

const schema = yup.object().shape({
  name: yup
    .string()
    .length(10, (elt)=> `${elt.originalValue ? elt.originalValue.length : "0" }`)
})

然后，如果你验证：

await schema.validate(
  { name: "AAA" },
  {
    strict: false,
    abortEarly: false,
  }
);

您将收到输入长度的验证错误：

  Array [
    [ValidationError: 3],
  ]

Answer 3

如果您提供函数作为 max() 的第二个参数，您将获得这些字段。

path,value,originalValue,label,max

name: Yup.string()
.trim()
.max(5, (obj) => {
  const valueLength = obj.value.length;
  return `Name (length: ${valueLength}) cannot be more than ${obj.max}`;
})
.required('Required')

YUP 验证——如何获取值

YUP validation - how to get the value

javascript

validation

reactjs

yup