18、表单验证与数据搜索组件开发实践

表单验证与数据搜索组件开发实践

在前端开发中，表单验证和数据搜索是常见且重要的功能。本文将详细介绍表单验证的实现，包括服务器端错误集成、表单提交状态指示，以及构建一个用于搜索客户信息的组件，涵盖数据展示、分页等功能。

表单验证

表单验证是确保用户输入数据有效性的重要环节，我们将从服务器端错误集成和表单提交状态指示两方面进行介绍。

服务器端错误集成

为了将服务器端错误集成到客户端验证逻辑中，我们需要在 handleSubmit 函数中添加新的分支来处理 fetch 请求的响应。具体步骤如下：
1. 在 handleSubmit 函数中添加如下代码：

if (result.ok) {
    setError(false);
    const customerWithId = await result.json();
    onSave(customerWithId);
} else if (result.status === 422) {
    const response = await result.json();
    setValidationErrors(response.errors);
} else {
    setError(true);
}

上述代码根据 fetch 请求的结果进行不同的处理：如果请求成功（ result.ok 为 t