使用Yup校验表单时最后填入字段校验失效的问题求助

问题根源 #

你在调用Yup的validateSync方法时犯了一个传参错误：把表单对象form用额外的对象包裹起来传了进去（写成{form}），导致Yup校验的对象结构和你定义的schema完全不匹配。

你的schema定义的是直接包含age、name、email的顶层对象，但你传入的{form}等价于{ form: form }——一个只有form属性的对象，Yup根本找不到顶层的age、name、email字段，自然会判定这些字段未填写。

修复方法 #

把validateSync的第一个参数从{form}改成直接传form即可：

const schema = yup.object().shape({
    age: yup.number().required("age is required"),
    name: yup.string().required("name is required"),
    email : yup.string().required("email is required"),
});

try{
    // 去掉外层对象包裹，直接传入表单对象
    schema.validateSync(form, {abortEarly: false})
}catch(e:any){
    let err = {
        age : '',
        name : '',
        email : '',
    }
    
    e.inner.forEach(error => {
        err[error.path] = error.message
    })
}

console.log(err)

关于“最后填入字段报错”的现象说明 #

这是错误校验逻辑下的表现：由于校验对象结构完全不符合schema要求，所有字段的校验都失效了，只是在你的操作场景中呈现为最后填入的字段报错，核心问题始终是传参导致的结构不匹配。

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