17、表单验证：从客户端到服务器端的全面实践

表单验证：从客户端到服务器端的全面实践

1. 客户端验证基础

首先，我们要为名字字段创建一个完整的验证系统。定义一个名为 hasFirstNameError 的函数，用于选择要显示的错误消息：

const hasFirstNameError = () =>
  validationErrors.firstName !== undefined;

接着，修改 JSX 以调用验证逻辑并显示错误信息。在名字输入框上设置 onBlur 处理程序，并在其后面渲染错误文本：

<input
  type="text"
  name="firstName"
  ...
  onBlur={handleBlur}
/>
<span id="firstNameError" role="alert">
  {hasFirstNameError()
    ? validationErrors["firstName"]
    : ""}
</span>

2. 多字段验证的通用化

为了将验证应用到姓氏和电话号码字段，我们需要对现有代码进行重构。具体步骤如下：
1. 提取错误渲染函数 ：在 CustomerForm 的 JSX 返回值上方添加 renderFirstNameError