求助：使用Formik结合Yup实现多字段联动条件验证

你的需求核心是跨字段的联合校验逻辑——只有当三个输入字段的值完全匹配预定义的默认值组合时，才给每个字段显示错误提示；只要有一个字段不同，就不报错。普通的单个字段验证规则无法实现这种关联校验，我们可以用Yup的自定义test方法来完成。

完整代码实现 #

首先，我们把校验逻辑抽成复用的函数，避免重复编写代码：

import * as Yup from 'yup';

const defaultValues = { name: 'testName', id: 'testID', postCode: 'testPostCode' };
const YUP_STRING = Yup.string().ensure().trim();

// 复用的校验函数：检查是否全匹配默认值组合
const isNotDefaultCombo = function() {
  // 通过this.parent获取整个表单的所有字段值
  const { name, id, postCode } = this.parent;
  // 只要有一个字段和默认值不同，就返回true（验证通过）；全匹配则返回false（触发错误）
  return !(
    name === defaultValues.name &&
    id === defaultValues.id &&
    postCode === defaultValues.postCode
  );
};

const validationSchema = Yup.object().shape({
  name: YUP_STRING
    .required('required')
    .test('not-default-combo', '不允许使用默认值', isNotDefaultCombo),
  id: YUP_STRING
    .required('required')
    .test('not-default-combo', '不允许使用默认值', isNotDefaultCombo),
  postCode: YUP_STRING
    .required('required')
    .test('not-default-combo', '不允许使用默认值', isNotDefaultCombo),
});

关键逻辑说明 #

1. 跨字段取值：在自定义test函数中，通过this.parent可以访问到整个表单的所有字段值，这样就能同时校验三个字段的组合关系。
2. 校验规则：当三个字段的值完全等于默认值组合时，返回false，触发我们定义的错误提示“不允许使用默认值”；只要有一个字段和默认值不同，就返回true，验证通过。
3. 复用性：把校验逻辑抽成独立函数isNotDefaultCombo，让三个字段共享同一个规则，让代码更简洁易维护。

效果验证 #

• 当输入name="testName"、id="testID"、postCode="testPostCode"时，三个字段都会显示“不允许使用默认值”的错误。
• 只要其中任意一个字段的值和默认值不同（比如name改成"newName"），所有字段的这个错误都会消失，只保留必填项的验证逻辑。

内容的提问来源于stack exchange，提问作者Akhil Suresh