Yup动态验证链

Question

我正在使用yup验证，并试图构建一个条件验证对象。

我的问题是，如何将必需的和匹配的对象添加到Yup.string()对象中，而不需要对其进行硬编码。类似于如何链接jQuery函数。

下面是我正在努力实现的一个例子：

if (field.required) {
  valSchema[id] = Yup.string().required(errorText[id].default);
}
if (field.validation) {
  valSchema[id] = Yup.string().matches(re, field.validation[0].message);
}
if (field.otherValidation) {
  valSchema[id] = Yup.string().matches(re, field.validation[1].message);
}

显然，这是行不通的，因为最后一个为真的条件将覆盖以前的条件。

如果所有的条件都是真的，最终的结果会是这样的。

valSchema[id] = Yup.string()
  .required(errorText[id].default)
  .matches(reExp, field.validation[0].message);
  .matches(reExp1, field.validation[1].message);

有什么想法吗？

谢谢。

Answer 1

要有条件地进行add/chain验证，可以使用Yup的.when方法。

此方法可以根据正在验证的值添加条件验证，也可以通过context对象添加条件验证，该对象可以作为选项参数传递给.validate和.isValid调用。

我创建了下面的代码简化示例。此解决方案利用在验证期间传入的Yup的context对象。上下文对象的键使用$符号引用。

const schema = yup.object({
  name: yup.string()
    .when('$required', (required, schema) => (required ? schema.required() : schema))
    .when('$regex1', (regex1, schema) => (regex1 ? schema.matches(/j/) : schema))
    .when('$regex2', (regex2, schema) => (regex2 ? schema.matches(/oe/) : schema))
});

将下列对象作为上下文提供给您在所有条件都为真的问题中的最终结果：

{
  required: true,
  regex1: true,
  regex2: true,
}

将所有这些放在一起给您提供了以下工作示例：

const yup = require("yup");

const schema = yup.object({
  name: yup.string()
    .when('$required', (required, schema) => (required ? schema.required() : schema))
    .when('$regex1', (regex1, schema) => (regex1 ? schema.matches(/j/) : schema))
    .when('$regex2', (regex2, schema) => (regex2 ? schema.matches(/oe/) : schema))
});

const myObject = {
  name: "joe",
}

const name = await schema.validate(myObject, {
  context: {
    required: true,
    regex1: true,
    regex2: true,
  }
});

console.log(name); // { name: "joe" }

在RunKit上查看和测试代码，在这里：https://runkit.com/joematune/6138a7db98ff810008ef37ab

• Yup.when(...：https://github.com/jquense/yup#mixedwhenkeys-string--arraystring-builder-object--value-schema-schema-schema

Answer 2

我动态地构建整个yup对象。这适用于动态链接：

const schema = {};
fields.forEach(f => {
  switch(f.dataType){
    case "string":
      schema[f.id] = Yup.string();
      if (f.required) schema[f.id] = schema[f.id].required();
      if (f.min) schema[f.id] = schema[f.id].min(f.min);
  }
});

return Yup.object().shape(schema);