React class component 表單驗證

導言 - Lead paragraph

在 React 應用中，表單驗證是一個常見的需求。

使用正則式可以方便地對輸入的資料進行格式驗證，以確保用戶輸入的資料是符合特定要求的。

函式組件中可以使用 React Hook From 搭配 Yup 達到快速驗證與好設置的目的，但它們並不支援 Class 組件使用，所以只能自行撰寫或找套件。

下面將透過實際範例演示如何在 Class 組件表單中運用正則式進行驗證，並於驗證不通過時提供相對應的錯誤提示。

範例 - Example

下面將會給兩個範例讓自己記憶一下，學習的方式主要還是靠範例與實做所以就不說廢話了：

即時驗證

表單中進行多個輸入欄位的驗證，並根據驗證結果顯示對應的錯誤提示。

點擊驗證

在使用者點擊提交按鈕時進行驗證，並在驗證不通過時彈出文字警示框 (Alert)。

結論 - Concluding

要確保用戶輸入的資料符合要求，才能提高應用的用戶體驗。（UX UPUP）