Yup 表单验证：如何在自定义方法中引用其他字段值

理解问题场景

在使用 Yup 进行表单验证时，我们经常会遇到需要根据一个字段的值来验证另一个字段的情况。例如，在电话号码验证中，我们可能需要结合国家代码(phonePrefix)和电话号码(phoneNumber)一起验证。

常见错误做法

很多开发者会尝试使用 yup.ref() 和 this.resolve() 的方式来实现跨字段引用，但往往会遇到以下问题：

1. 在自定义验证方法中获取到的不是字段的实际值，而是 Yup 的 Schema 对象
2. 由于箭头函数的 this 绑定问题，无法正确访问上下文

正确解决方案

1. 避免使用箭头函数

在 Yup 的自定义验证方法中，this 上下文非常重要。使用箭头函数会导致 this 绑定丢失，无法访问 Yup 提供的上下文方法。

错误示例：

return this.test("is-valid-phone-number", "错误提示", (value) => {
  // 这里的 this 不是预期的 Yup 上下文
});

正确做法：

return this.test("is-valid-phone-number", "错误提示", function(value) {
  // 使用普通函数确保 this 绑定正确
});

2. 使用 this.parent 访问其他字段

在验证函数内部，可以通过 this.parent 访问整个表单对象，从而获取其他字段的值：

yup.addMethod(yup.string, "phoneNumber", function(prefixFieldName) {
  return this.test("is-valid-phone-number", "请输入有效的电话号码", 
    function(value) {
      const prefix = this.parent[prefixFieldName];
      return isValidPhoneNumber(value, prefix);
    }
  );
});

3. 完整实现示例

// 添加自定义验证方法
yup.addMethod(yup.string, "phoneNumber", function(prefixFieldName) {
  return this.test("phone-number", "${path} 必须是有效的电话号码", 
    function(value) {
      if (!value) return true; // 允许空值
      
      // 获取关联字段的值
      const prefix = this.parent[prefixFieldName];
      
      // 执行验证逻辑
      return isValidPhoneNumber(value, prefix);
    }
  );
});

// 使用示例
const schema = yup.object({
  phonePrefix: yup.string().required(),
  phoneNumber: yup.string().phoneNumber('phonePrefix'),
});

高级技巧

1. 动态错误消息

可以根据验证结果返回不同的错误消息：

return this.test("phone-number", function(value) {
  const prefix = this.parent[prefixFieldName];
  const isValid = isValidPhoneNumber(value, prefix);
  
  return isValid || this.createError({
    message: `电话号码必须与 ${prefixFieldName} 匹配`,
    path: this.path
  });
});

2. 异步验证

如果需要异步验证（如检查电话号码是否已注册），可以使用异步测试：

yup.addMethod(yup.string, "phoneNumberAsync", function(prefixFieldName) {
  return this.test("phone-number", "${path} 必须是有效的电话号码", 
    async function(value) {
      const prefix = this.parent[prefixFieldName];
      return await checkPhoneNumberOnServer(value, prefix);
    }
  );
});

总结

在 Yup 中实现跨字段验证时，关键点在于：

1. 使用普通函数而非箭头函数来保持正确的 this 上下文
2. 通过 this.parent 访问表单中的其他字段值
3. 合理设计验证逻辑和错误消息

这种方法不仅适用于电话号码验证，也可以推广到任何需要跨字段验证的场景，如密码确认、日期范围验证等。