如何在没有formik的情况下在react yup表单验证中显示错误消息

Question

我对 YUP 图书馆很陌生。 我正在尝试使用 yup 验证我的表单。

export const userLogin = yup.object({
    email:yup.string().email("Enter valid Email").required("This field is Required"),
    password:yup.string().min(5).max(12).required(),
}) 

   const data = {
     email:"example@gmail.com",
     password:"password"
   }



  userLogin.isValid(data)
   .then((response) =>{
      console.log(response) //true
  })

现在我要获取我在架构中提到的错误消息。 我怎么才能得到它？

Answer 1

您可以使用yup库的validate function 代替isValid function ，例如：

userLogin
  .validate(data, { abortEarly: false })
  .then((responseData) => {
    console.log("no validation errors");
    console.log(responseData);
    setCurrentErrors([]);
})
  .catch((err) => {
    console.log(err);
    console.log(err.name); // ValidationError
    console.log(err.errors);
    setCurrentErrors(err.errors);
});

您可以查看 此沙盒以获取实时工作示例。