如何像這個 svelte 教程中那樣使用 zod 和 react-hook-form 記錄表單驗證？

Question

我嘗試遵循 svelte 中的 zod 驗證教程。我對此沒有經驗（svelte），所以我想知道如何在簡單的 React/next 應用程式中複製此程式碼功能？我陷入困境（{request}）將是什麼/我將傳遞給非同步函數。

此外，這應該在 useEffect 內部進行還是僅在表單提交時調用？

export const actions = {
default: async ({ request }) => {
    const formData = Object.fromEntries(await request.formData());
    console.log('Form Data:', formData);

    try {
        const result = registerSchema.parse(formData);
        console.log('SUCCESS');
        console.log(result);
    } catch (err) {
        const { fieldErrors: errors } = err.flatten();
        const { password, passwordConfirm, ...rest } = formData;
        return {
            data: rest,
            errors
        };
    }
};

這裡是本教學的儲存庫：https://github.com/huntabyte/sveltekit-form-validation/blob/main/src/routes/+page.server.js

Answer 1

這就是我所做的：

1. 首先，我使用 zod 定義了驗證架構。
2. 然後，我建立了一個自訂掛鉤來處理表單提交和驗證。在這個鉤子中，我使用了react-hook-form中的useForm鉤子來管理表單狀態。
3. 為了處理表單提交，我將 handleSubmit 函數從 useForm 傳遞到我的自訂掛鉤。
4. 在handleSubmit 函數中，我使用了zod 驗證架構中的parse 方法來驗證表單資料。
5. 如果驗證成功，我會將表單資料記錄到控制台。如果沒有，我將傳回一個包含表單資料和任何驗證錯誤的物件。

總的來說，我發現這種方法效果很好，並且易於理解和實施。至於您關於在哪裡放置驗證程式碼的問題，我建議在表單提交時呼叫它，而不是在 useEffect 中呼叫它。