首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

基础概念

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

相关优势

  1. 可重用性:子模式可以被多个父模式重用,减少了代码重复。
  2. 模块化:通过将验证逻辑分解为多个子模式,代码更加模块化和易于维护。
  3. 灵活性:子模式可以根据需要动态地组合和修改,提供了极大的灵活性。

类型

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

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

应用场景

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

代码语言:txt
复制
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 属性访问父模式的值。例如,假设你有一个嵌套的对象结构,并且你想在子模式中访问父对象的某个字段。

代码语言:txt
复制
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 来访问父值。

代码语言:txt
复制
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 方法捕获验证错误,并获取详细的错误信息。

代码语言:txt
复制
try {
  await userSchema.validate(userInput, { abortEarly: false });
} catch (err) {
  err.inner.forEach(error => {
    console.error(`${error.path}: ${error.message}`);
  });
}

参考链接

通过以上内容,你应该对 Yup 子模式访问父值或将值传递给子模式有了更深入的了解,并且能够解决一些常见问题。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券