この洗練されたチュートリアルのように、zod と reverse-hook-form を使用してフォーム検証をログに記録するにはどうすればよいですか?

Question

svelte で zod 検証チュートリアルに従ってみました。私はこれに関する経験がありません（洗練された）ので、このコードの機能を単純な React/next アプリでどのように複製できるか疑問に思っています。 ({request}) が非同期関数に渡されるか、渡されるかについて困っています。

また、これは useEffect 内で実行する必要がありますか、それともフォーム送信時にのみ呼び出す必要がありますか?

リーリー

このチュートリアルのリポジトリは次のとおりです: https://github.com/huntabyte/sveltekit-form-validation/blob/main/src/routes/+page.server.js

Answer 1

これが私がやったことです:

1. まず、zod を使用して検証スキーマを定義しました。
2. 次に、フォームの送信と検証を処理するカスタム フックを作成しました。このフックでは、react-hook-form の useForm フックを使用してフォームの状態を管理しました。
3. フォームの送信を処理するには、useForm からカスタム フックに handleSubmit 関数を渡します。
4. handleSubmit 関数では、zod 検証アーキテクチャの parse メソッドを使用してフォーム データを検証しました。
5. 検証が成功したら、フォーム データをコンソールに記録します。そうでない場合は、フォーム データと検証エラーを含むオブジェクトを返します。

全体として、このアプローチはうまく機能し、理解しやすく実装しやすいと思います。検証コードをどこに置くかについての質問に関しては、useEffect 内で呼び出すのではなく、フォーム送信時に呼び出すことをお勧めします。