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

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

在Web应用开发中，表单验证和消息提示是提升用户体验和保障数据质量的重要环节。本文将详细介绍如何在React应用中实现表单验证和消息提示功能。

1. 表单验证规则设置

在开始表单验证之前，我们需要明确注册和登录表单的验证规则：
- 注册表单规则 ：
- 用户名和邮箱长度需大于5个字符。
- 密码长度必须大于10个字符。
- 邮箱必须是有效的邮箱地址（格式为 something@something.something ）。
- 登录表单规则 ：
- 用户名和邮箱不能为空。

2. 禁用提交按钮

为了防止用户在表单未验证通过时提交表单，我们可以为提交按钮添加 disabled 属性，并将其初始值设置为 true 。

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

同时，在 Form 组件的状态中添加 valid 属性，用于表示表单是否有效：

this.state = {
  formData: {
    us