Yup多字段联合长度校验需求：总长度超50时全字段报错

针对需求中要求的「当address1、address2、address3总长度超过50时，所有字段均显示错误」，可以通过Yup的对象级test方法实现跨字段校验，以下是完整代码：

address: Yup.object()
  .shape({
    address1: Yup.string().required("Please enter valid address1"),
    address2: Yup.string().required("Please enter valid address2"),
    address3: Yup.string().required("Please enter valid address3"),
  })
  .test(
    "total-length-limit",
    "地址总长度不能超过50个字符",
    function(value) {
      // 计算三个字段的总长度，兼容字段未赋值的情况
      const totalLength = (value.address1?.trim().length || 0) + 
                         (value.address2?.trim().length || 0) + 
                         (value.address3?.trim().length || 0);
      
      if (totalLength > 50) {
        // 给每个字段添加错误提示，确保所有字段都显示错误
        this.createError({ path: "address.address1", message: "地址总长度不能超过50个字符" });
        this.createError({ path: "address.address2", message: "地址总长度不能超过50个字符" });
        this.createError({ path: "address.address3", message: "地址总长度不能超过50个字符" });
        return false;
      }
      return true;
    }
  )

关键说明 #

• 保留原有三个字段的必填校验规则；
• 使用test方法创建自定义校验逻辑，total-length-limit为校验规则标识名；
• 计算总长度时，通过?.运算符处理字段未赋值的情况，避免出现Cannot read property 'length' of undefined错误；
• 当总长度超过50时，调用this.createError为每个字段单独添加错误信息，确保表单中所有地址字段都会显示错误提示；
• 校验通过返回true，不通过返回false。

内容的提问来源于stack exchange，提问作者Suyog Sawant