不使用Formik时如何通过Yup字符串错误路径识别校验出错项

使用{ abortEarly: false }配置执行全量校验后，只需将err.inner内的错误按路径聚合为映射表，即可快速判断各字段的校验状态，具体实现逻辑如下：

核心实现代码 #

在校验的异常捕获分支遍历err.inner数组，将错误按路径聚合存储即可：

schema.validate(data, { abortEarly: false })
  .then(() => {
    // 无任何校验错误，errors为空对象
    const errors = {}
  })
  .catch(err => {
    const errors = {}
    err.inner.forEach(error => {
      // 同一路径存在多个校验规则时，默认取第一个错误提示
      // 如需存储同路径所有错误，可将value改为数组存储
      if (!errors[error.path]) {
        errors[error.path] = error.message
      }
    })
    // 最终errors为「字段路径: 错误提示」的映射结构
  })

校验状态判断方法 #

• 单字段校验状态判断：直接读取errors[目标字段路径]，有值则说明该字段校验不通过，值为对应的错误提示
• 错误字段批量获取：执行Object.keys(errors)即可拿到所有校验失败的字段路径集合
• 整体校验结果判断：Object.keys(errors).length === 0即代表所有字段校验通过

动态对象/表单适配 #

如果是嵌套对象、动态数组类型的校验目标，生成的路径会是order.goodsList[3].price这类带索引的字符串格式，可直接用完整字符串作为key，和动态表单项的name属性完全匹配，无需额外解析路径即可直接对接Formik的errors字段使用。

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