Yup子模式访问父值(或将值传递给子模式)

基础概念

Yup 是一个用于 JavaScript 和 TypeScript 的对象模式验证库。它允许你定义复杂的验证规则，并在数据输入时进行验证。子模式（Subschema）是 Yup 中的一个概念，允许你在父模式（Parent Schema）的基础上创建一个更具体的验证模式。

类型

Yup 提供了几种常见的子模式类型：

Yup.object()：用于定义对象模式的子模式。
Yup.array()：用于定义数组模式的子模式。
Yup.string()：用于定义字符串模式的子模式。
Yup.number()：用于定义数字模式的子模式。

应用场景

假设你有一个用户注册表单，其中包含用户名、电子邮件和密码。你可以将这些字段分别定义为子模式，然后在父模式中组合这些子模式。

import * as Yup from 'yup';

const usernameSchema = Yup.string()
  .required('Username is required')
  .min(3, 'Username must be at least 3 characters');

const emailSchema = Yup.string()
  .required('Email is required')
  .email('Invalid email address');

const passwordSchema = Yup.string()
  .required('Password is required')
  .min(6, 'Password must be at least 6 characters');

const userSchema = Yup.object().shape({
  username: usernameSchema,
  email: emailSchema,
  password: passwordSchema,
});

访问父值或将值传递给子模式

在 Yup 中，子模式可以通过 parent 属性访问父模式的值。例如，假设你有一个嵌套的对象结构，并且你想在子模式中访问父对象的某个字段。

const nestedSchema = Yup.object().shape({
  parentField: Yup.string().required(),
  childField: Yup.string().required().test(
    'is-parent-field-valid',
    'Parent field must be valid',
    (childValue, context) => {
      const parentValue = context.parent.parentField;
      // 在这里进行验证逻辑
      return parentValue === 'valid';
    }
  ),
});

遇到的问题及解决方法

问题：子模式无法访问父值

原因：可能是由于 context 对象没有正确传递或使用。

解决方法：确保在子模式中使用 context.parent 来访问父值。

const nestedSchema = Yup.object().shape({
  parentField: Yup.string().required(),
  childField: Yup.string().required().test(
    'is-parent-field-valid',
    'Parent field must be valid',
    (childValue, context) => {
      const parentValue = context.parent.parentField;
      return parentValue === 'valid';
    }
  ),
});

问题：子模式验证失败但无法获取详细的错误信息

原因：可能是由于验证错误处理不当。

解决方法：使用 catch 方法捕获验证错误，并获取详细的错误信息。

try {
  await userSchema.validate(userInput, { abortEarly: false });
} catch (err) {
  err.inner.forEach(error => {
    console.error(`${error.path}: ${error.message}`);
  });
}