如何使用 Formik 和 Yup 進行服務器端驗證？

Question

我正在嘗試驗證注冊表單上的電子郵件字段以檢查它是否已經存在。 為此，我正在檢查在服務器上運行一個返回 true 和 false 的 GET 請求。

這是我對該字段的驗證架構：

validationSchema={
    yup.object().shape({
        registrationEmail: yup.string().email('Invalid email').test('Unique Email','Email already in use', async (value) => {axios.get('http://localhost:5000/users/register', value).catch(err => console.log(err)) })
    })
}

問題似乎是值字段為空。 如何將 Formik 字段中的值傳遞給我的函數？

編輯：管理使用以下發送值

registrationEmail: yup.string().email('Invalid email').test('Unique Email','Email already in use', function(value){return new Promise((resolve, reject) => {axios.get('http://localhost:5000/users/register', value)})})

我仍然無法返回響應，這就是路由的樣子

router.get('/register', (req, res) => {
    User.findOne({email: req.body.email}).then(user => {
        if(user){
            return true
        }else{
            return false
        }
    })
})

Answer 1

我解決了驗證問題，我執行了以下操作：

 registrationEmail: yup.string().email('Invalid email')
                        .test('Unique Email','Email already in use', 
                            function(value){return new Promise((resolve, reject) => {
                                axios.post('http://localhost:5000/users/register/validEmail', {'email': value})
                                .then(res => {if(res.data.msg === 'Username already been taken'){resolve(false)} resolve(true)})
                            })}
                        )

對於路線：

router.post('/register/validEmail', (req, res) => {
    console.log('Request: ', req.body)
    User.findOne({email: req.body.email}).then(user => {
        if(user){
            console.log({ msg:"Username already been taken" })
            return res.json({ msg:"Username already been taken" })
        }

        console.log({ msg: "Username available." })
        return res.json({ msg: "Username available." })

    }).catch((err)=>{
        console.error(err);
        res.status(400).json('Error: ' + err)
    })
})

結果我不得不使用 POST 請求，否則請求的正文將為空。

Answer 2

我注意到您在問題中使用了 async/await，但您的回答使用了 promise。 我更喜歡 async/await，最初認為 Yup 的測試功能不支持它，因為如果您的解決方案，但 Yup 確實支持 async/await！ 這是我的代碼示例，供任何需要示例的人使用。 文檔中還有一些示例： https : //github.com/jquense/yup#mixedtestname-string-message-string--function-test-function-schema

username: Yup.string()
      .min(2, 'Too short, minimum 2 characters')
      .max(50, 'Too long, maximum 50 characters')
      .required('Required')
      .test(
        'username-backend-validation',  // Name
        'Username taken',               // Msg
        async (username) => {
          // Res from backend will be flag at res.data.success, true for 
          // username good, false otherwise
          const { data: { success } } = await axios.post(
            "http://localhost:3001/api/users/register/validate-username", 
            { username: username }
          );

          return success
        }
      )