如何像这个 svelte 教程中那样使用 zod 和 react-hook-form 记录表单验证?
P粉421119778
P粉421119778 2024-01-28 23:16:11
0
1
481

我尝试遵循 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

P粉421119778
P粉421119778

全部回复(1)
P粉714780768

这就是我所做的:

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

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板