Wie protokolliere ich die Formularvalidierung mit Zod und React-Hook-Form wie in diesem schlanken Tutorial?

Question

Ich habe versucht, dem Zod-Verifizierungs-Tutorial in Svelte zu folgen. Ich habe keine Erfahrung damit (schlank), also frage ich mich, wie ich diese Codefunktionalität in einer einfachen React/Next-App replizieren kann? Ich weiß nicht, was ({request}) an die asynchrone Funktion übergeben wird/werden soll.

Sollte dies auch innerhalb von useEffect erfolgen oder nur bei der Formularübermittlung aufgerufen werden?

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
        };
    }
};

Hier ist das Repository für dieses Tutorial: 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 中调用它。