12、React表单验证与消息提示功能实现

React表单验证与消息提示功能实现

在开发Web应用时，表单验证和消息提示是非常重要的功能。表单验证可以确保用户输入的数据符合要求，而消息提示则能及时向用户反馈操作结果。下面我们将详细介绍如何在React应用中实现这些功能。

1. 表单验证规则设定

首先，我们需要为注册和登录表单设定验证规则：
- 注册表单规则 ：
1. 用户名和邮箱长度需大于5个字符。
2. 密码长度必须大于10个字符。
3. 邮箱必须是有效的邮箱地址（格式为 something@something.something ）。
- 登录表单规则 ：
1. 用户名和邮箱不能为空。

2. 禁用提交按钮

为了防止用户在表单未验证通过时提交表单，我们可以给提交按钮添加 disabled 属性，并将其初始值设为 true 。具体操作如下：
- 在 src/components/Form.jsx 中更新 input 按钮：

<input
  type="submit"
  className="btn btn-primary btn-lg btn-block"
  value="Submit"
  disabled={true}
/>

• 在 Form() 组件的