C++每日训练 Day 18：构建响应式表单与数据验证（初学者友好）

本篇目标：在前几日协程与事件驱动机制基础上，构建一个响应式表单系统，实现用户输入的异步验证与反馈。通过协程挂起/恢复机制，简化异步逻辑，提升代码可读性。

---

回顾 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：构建多字段表单与整体验证流程

• 创建包含多个字段的表单组件
• 使用协程处理多个字段的输入与验证
• 实现表单整体提交与结果反馈