表單是每個開發人員都會遇到的東西，無論是作為使用者還是開發人員。它們在大多數網站上都是必不可少的，但它們的複雜性可能差異很大——從簡單的3 欄位聯絡表單到giga-monster-t-rex、具有150 個欄位的多頁表單、動態驗證和異步檢查。
在這篇文章中，我們將探索如何使用 React Hook Form、Zod 和 Shadcn 創建一個適應性強、開發人員友好的解決方案，輕鬆處理各種表單需求。
這是我們將在這篇文章中開發的表單。我計劃寫另一篇關於表單高級使用的文章，後續將更加複雜，敬請期待？
讓我們看看我們將用來建立和管理表單的堆疊。
這是一個範例片段，展示了 Shadcn 庫中的表單欄位：
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>Name</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
即使您喜歡使用不同風格的堆棧，只要您堅持使用 React 和 RHF，這仍然是一個可以幫助您繼續前進的有效範例。
我們將用來示範基本表單的應用程式是一個具有基本 CRUD 操作的管理面板。它將包括電子郵件和密碼身份驗證，並由兩個頁面組成：一個顯示所有用戶表的主螢幕，以及一個用戶創建頁面，這將是本文的重點。
我們的表單將包括驗證，以確保使用者在不符合指定要求的情況下無法提交表單（即建立新使用者）。 User 物件是驗證範例的絕佳候選者，因為它包含適合不同驗證的各種資料類型：字串、日期（例如出生日期）、電子郵件字串和布林值（例如高級使用者狀態）。完整的 Prisma 架構文件如下所示。
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>Name</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
為了快速啟動我們的項目，我們將使用帶有 TypeScript 的預定義 Wasp 模板，稱為 todo-ts。此範本附帶現成的元件和驗證路由，包括登入和註冊畫面。它還提供了有關 Wasp 中 CRUD 操作如何運作的可靠範例，如果您是該框架的新手，它是理想的選擇。此外，我們將利用新的 Wasp TypeScript SDK 來管理我們的配置，因為它提供了擴充的客製化靈活性。
Wasp 團隊正在努力創建這樣的內容，更不用說建立一個現代的開源 React/NodeJS 框架了。
表達支援最簡單的方法就是為 Wasp 倉庫加註星標！ ？但如果您可以查看儲存庫（用於貢獻，或只是測試產品），我們將不勝感激。點擊下面的按鈕給Wasp一顆星並表示您的支持！
⭐️ 謝謝您的支持？
為了使用表單，我們先定義 Zod 驗證模式。我們的表單有三種資料類型：字串、日期和布林值。我們將對大多數欄位應用驗證：姓名是必需的，而電子郵件則使用內建的電子郵件驗證。 Zod 透過針對不同類型（例如電子郵件、URL 和 UUID）的內建驗證簡化了常見字串類型的驗證，這對我們的電子郵件領域很有幫助。
對於額外的驗證，日期不能設定為未來的日期，且 premiumUser 欄位只需為布林值即可。 Zod 也提供預設的驗證錯誤訊息，但這些訊息可以自訂。例如，我們可以指定名稱：z.string().min(1, 'Name is required').
，而不是名稱：z.string().min(1)
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>Name</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
我們的表單由 React Hook Form 中的 useForm 鉤子管理，它提供了廣泛的選項來處理和驗證表單值、檢查錯誤和管理表單狀態。為了整合我們的 Zod 驗證模式，我們將使用 Zod 解析器，讓 React Hook Form 應用我們先前定義的驗證。
表單的defaultValues源自於客戶物件。由於該元件用於新增客戶和編輯現有客戶，因此我們將傳遞必要的資料作為輸入。對於新客戶，使用一些合理的預設值；對於現有客戶，從資料庫中檢索資料。除了設定預設值和決定是否呼叫 createCustomer 或 updateCustomer 之外，表單處理的所有其他方面都保持不變。
model Customer {
id Int @id @default(autoincrement())
name String
surname String
email String
dateOfBirth DateTime
premiumUser Boolean
}
最後一步是建立表單本身並將其組裝到 TSX 檔案中。如前所述，這個過程很簡單。無論我們使用文字輸入、日期選擇器還是帶有 Shadcn 控制項的複選框，我們都遵循類似的結構：
const formSchema = z.object({
name: z.string().min(1, { message: 'Name is required' }),
surname: z.string().min(1, { message: 'Surname is required' }),
email: z.string().email({ message: 'Invalid email address' }),
dateOfBirth: z
.date()
.max(new Date(), { message: 'Date cannot be in the future' }),
premiumUser: z.boolean(),
});
如果您想查看完整的應用程序，請查看此處的 GitHub 存儲庫：GitHub Repo。我希望本文能使表單的使用變得更加容易，如果您對更多與表單相關的內容感興趣，請繼續關注第二部分！在下一部分中，我們將深入研究高級模式和驗證技術來增強您的應用程式。
如果您喜歡這篇文章，請考慮在 GitHub 上為 Wasp 加星號！您的支持幫助我們繼續為每個人提供更輕鬆、更順暢的 Web 開發。 ？
以上是使用 React Hook Form、Zod 和 Shadcn 輕鬆建立 React Form的詳細內容。更多資訊請關注PHP中文網其他相關文章！
