📘 本篇目標：在前幾日協程與事件驅動機制基礎上，構建一個響應式表單系統，實現用戶輸入的異步驗證與反饋。通過協程掛起/恢復機制，簡化異步邏輯，提升代碼可讀性。
🔁 回顧 Day 17：響應式加載動畫與異步數據處理
在 Day 17 中，我們實現了一個完整的“點擊按鈕 → 顯示加載動畫 → 異步加載數據 → 顯示結果”的流程。主要內容包括：
- 加載動畫組件：用于在數據加載期間顯示加載狀態。
- 異步數據加載器：模擬異步加載數據的過程。
- 協程處理邏輯：使用協程掛起/恢復機制，實現清晰的異步邏輯。
這些基礎為我們今天的內容打下了堅實的基礎。
? 一、表單輸入組件設計
我們首先創建一個簡單的表單輸入組件，用于模擬用戶輸入。
struct InputField {std::string label;std::string value;std::function<void(const std::string&)> onInput;void input(const std::string& text) {value = text;if (onInput) onInput(value);}
};
📌 說明：InputField 模擬一個輸入框，onInput 是輸入事件的回調函數。
? 二、構建異步驗證器
接下來，創建一個模擬異步驗證用戶輸入的函數，使用協程實現。
Task<bool> validateInputAsync(const std::string& input) {co_await std::suspend_always{}; // 模擬異步等待std::this_thread::sleep_for(std::chrono::seconds(1)); // 模擬驗證時間co_return !input.empty(); // 簡單驗證：輸入非空為有效
}
📌 說明：validateInputAsync 模擬異步驗證過程，返回驗證結果。
? 三、構建輸入事件處理協程
我們創建一個協程函數，處理用戶輸入事件，進行異步驗證，并在驗證完成后更新界面。
Task<void> onInputChanged(InputField& field) {std::string input = field.value;bool isValid = co_await validateInputAsync(input); // 異步驗證輸入if (isValid) {std::cout << "? 輸入有效: " << input << "\n";} else {std::cout << "? 輸入無效，請重新輸入。\n";}co_return;
}
📌 說明：onInputChanged 協程處理輸入事件，進行異步驗證，并輸出結果。
? 四、主函數模擬用戶輸入
在主函數中，模擬用戶輸入，觸發上述協程。
int main() {InputField usernameField{ "用戶名" };usernameField.onInput = [&](const std::string& text) {auto task = onInputChanged(usernameField); // 啟動協程處理輸入事件// 模擬事件循環while (!task.done()) {task.resume(); // 恢復協程執行}};// 模擬用戶輸入std::cout << "🖊? 用戶輸入: Alice\n";usernameField.input("Alice");std::cout << "🖊? 用戶輸入: \n";usernameField.input("");return 0;
}
輸出：
🖊? 用戶輸入: Alice
? 輸入有效: Alice
🖊? 用戶輸入:
? 輸入無效，請重新輸入。
? 總結
通過以上步驟，我們實現了一個響應式表單系統，使用協程清晰地表達了異步驗證邏輯，避免了傳統回調方式帶來的復雜性。
🧠 鞏固練習題
Q1：如何處理多個輸入字段的驗證？
A：為每個輸入字段創建獨立的協程處理函數，分別處理各自的輸入事件。
Q2：如何處理驗證失敗后的提示？
A：在協程中根據驗證結果，更新界面提示信息，指導用戶重新輸入。
Q3：如何擴展驗證規則？
A：在 validateInputAsync 中添加更多的驗證邏輯，例如正則表達式匹配、數據庫查重等。
🔭 下一步 Day 19：構建多字段表單與整體驗證流程
- 創建包含多個字段的表單組件
- 使用協程處理多個字段的輸入與驗證
- 實現表單整體提交與結果反饋
