如何使用Yup与react-hook-form验证四个输入值总和为100？

可以通过Yup的test方法添加对象级别的自定义校验规则，实现四个输入框数值总和等于100的需求，完整代码如下：

Yup.object().shape({
  input1: Yup.number().required('此字段为必填项'),
  input2: Yup.number().required('此字段为必填项'),
  input3: Yup.number().required('此字段为必填项'),
  input4: Yup.number().required('此字段为必填项')
}).test(
  'sum-equal-to-100',
  '四个输入框的数值总和必须为100',
  function(value) {
    const { input1, input2, input3, input4 } = value;
    // 避免因字段未填导致的NaN计算
    if (!input1 || !input2 || !input3 || !input4) return true;
    return input1 + input2 + input3 + input4 === 100;
  }
);

关键说明： #

• test方法用于添加自定义校验，第一个参数是校验的唯一标识（可自定义），第二个是校验失败时的提示文本，第三个是核心校验逻辑函数。
• 校验函数中先解构出四个字段的值，先判断所有字段是否都有有效值（虽然已经配置了required，但额外判断可以避免计算时出现NaN），再计算总和是否等于100，返回布尔值表示校验结果。
• 如果需要限制输入为非负数，可以给每个number()添加min(0)规则，比如Yup.number().min(0).required(...)，避免负数影响总和计算。

内容的提问来源于stack exchange，提问作者khaliloos benk