如何使用yup与react-hook-form实现表单分步验证？

方案1：开启yup的abortEarly配置（推荐） #

yup默认按照你定义校验规则的顺序依次执行校验，开启abortEarly配置后，遇到第一个校验失败项就会终止后续校验逻辑，刚好匹配你「先通过必填、格式校验再调用唯一性校验接口」的需求，仅需修改yupResolver的传参即可：

const { register, handleSubmit, formState: { errors } } = useForm({ 
  mode: 'onBlur', 
  // 增加abortEarly配置项
  resolver: yupResolver(schema, { abortEarly: true }) 
});

注意：开启abortEarly后单个字段只会返回第一个匹配的错误提示，如果你需要同时展示同一个字段的多个错误提示，可以使用方案2。

方案2：自定义test内增加前置判断 #

如果你不需要全局开启abortEarly，可以直接在唯一性校验的test回调中增加前置判断，基础校验不通过时直接跳过接口请求即可，同时补全原代码中catch分支的返回值，避免接口报错时出现逻辑漏洞：

const schema = yup.object().shape({
  email: yup
    .string()
    .required()
    .email('wrong email.')
    .test('unique email', 'already using', async (value) => {
      // 基础校验不通过时直接返回true，不触发接口请求
      if (!value || !yup.string().email().isValidSync(value)) return true
      try {
        const res = await axios.post('/accounts/emailcheck', { email: value });
        return res.data.possible;
      } catch (err) {
        console.error(err);
        return false // 接口异常时默认判定校验不通过
      }
    }),
})

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