Wie protokolliere ich die Formularvalidierung mit Zod und React-Hook-Form wie in diesem schlanken Tutorial?
P粉421119778
P粉421119778 2024-01-28 23:16:11
0
1
477

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

P粉421119778
P粉421119778

Antworte allen(1)
P粉714780768

这就是我所做的:

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

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

Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage