如何像这个 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/%2Bpage.server.js

Answer 1

这就是我所做的：

1. 首先，我使用 zod 定义了验证架构。
2. 然后，我创建了一个自定义挂钩来处理表单提交和验证。在这个钩子中，我使用了react-hook-form中的useForm钩子来管理表单状态。
3. 为了处理表单提交，我将 handleSubmit 函数从 useForm 传递到我的自定义挂钩。
4. 在handleSubmit 函数中，我使用了zod 验证架构中的parse 方法来验证表单数据。
5. 如果验证成功，我会将表单数据记录到控制台。如果没有，我将返回一个包含表单数据和任何验证错误的对象。

总的来说，我发现这种方法效果很好，并且易于理解和实施。至于您关于在哪里放置验证代码的问题，我建议在表单提交时调用它，而不是在 useEffect 中调用它。