React フックを使用したフォーム Form Zod

導入

私がプログラミングを始めたとき、フォームからデータを収集するために純粋な JavaScript で多くのコードを記述する必要がありました。それ以来、Web 開発は大きく進化し、現在ではこの作業の多くを抽象化するライブラリがあり、フォーム データの管理が容易になりました。

この記事では、React Hook Form を使用してフォーム データを操作し、zod を使用してこのデータを効率的かつ組織的に検証する方法を説明します。

急いでいるのですが、完全なコードを教えてください

それはあなたの手の中にあります:

このスキーマは、各フィールドに必要な型と検証を定義します。 .refine() メソッドは、「パスワード」フィールドと「確認」フィールドに入力されたパスワードが同じであることを確認するために使用されました。

React Hook Form および Zod Resolver との統合

React Hook Form は、不必要な再レンダリングを減らし、データ操作を簡素化することでパフォーマンスを向上させるフォーム ライブラリです。 useForm() を使用してフォームを設定し、zodResolver:
を通じて検証スキーマを渡しました。

useForm() から使用した関数と変数は次のとおりです。

• handleSubmit: フォームの送信を処理します。
• register: フォームフィールドを React Hook Form データ管理にバインドします。
• リセット: フォームをリセットします。
• isSubmitting: フォームが送信されているかどうかを示します。
• エラー: 各フィールドの検証エラーを保存します。 ### フォーム送信機能 フォーム送信をシミュレートするために、isSubmitting ステータスを表示する待ち時間を追加し、トーストとともに成功メッセージを表示する handleSignup 関数を作成しました。

次に、フォームに関数を追加しました。

最後に、 register を使用してどのフィールドがどのプロパティに属するかを指定し、エラー (存在する場合) を表示しました。

<div className="space-y-2">
  <Label htmlFor="name">名前</Label>
  



<p>結果は次のようになります:</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173112234459208.jpg" alt="Formulários com React Hook Form   Zod"></p>

<h2>
  
  
  最終的な考慮事項
</h2>

<p>このテキストでは、React Hook Form と zod を統合して制御されていないフォームを検証する簡単な方法を示しました。このライブラリは制御されたコンポーネントでも動作するため、ドキュメントを参照してその他のオプションを調べてください。</p>


          

            
        

以上がReact フックを使用したフォーム Form Zodの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。