如何在 React 组件的表单中添加验证规则？

在React组件中添加表单验证通常涉及以下几个步骤：

1. 设计表单状态

首先，你需要设计一个状态用以存储表单的输入值以及可能的验证错误。这通常是通过使用useState来实现的。

例如：

javascript
const [formData, setFormData] = useState({
    username: '',
    email: '',
    password: ''
});

const [errors, setErrors] = useState({
    username: '',
    email: '',
    password: ''
});

2. 创建验证函数

接下来，你需要创建一个函数来验证表单的输入。这个函数可以在表单提交时调用，或者每当输入字段发生变化时调用。

例如：

javascript
function validateForm() {
    let newErrors = {};
    // 用户名必须填写
    if (!formData.username) {
        newErrors.username = 'Username is required';
    }
    // 邮箱格式验证
    if (!/\S+@\S+\.\S+/.test(formData.email)) {
        newErrors.email = 'Email address is invalid';
    }
    // 密码长度验证
    if (formData.password.length < 6) {
        newErrors.password = 'Password must be at least 6 characters';
    }
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
}

3. 在表单元素上应用验证

你可以在表单的元素（如输入框）上显示验证错误，并在用户输入时进行实时验证。

例如，在表单提交时：

javascript
const handleSubmit = event => {
    event.preventDefault();
    if (validateForm()) {
        console.log('Form is valid! Submitting...');
        // 进行表单提交操作
    } else {
        console.log('Form is invalid! Correct errors before submitting.');
    }
};

在输入字段变化时可以这样做：

javascript
const handleChange = event => {
    const { name, value } = event.target;
    setFormData(prevState => ({
        ...prevState,
        [name]: value
    }));
    // 可选：在这里调用 validateForm() 来实现实时验证
};

4. 显示错误信息

在你的JSX中，确保你有一个地方来显示与每个输入字段相关的错误信息。

例如：

javascript
<form onSubmit={handleSubmit}>
    <input
        type="text"
        name="username"
        value={formData.username}
        onChange={handleChange}
    />
    {errors.username && <p>{errors.username}</p>}

    <input
        type="email"
        name="email"
        value={formData.email}
        onChange={handleChange}
    />
    {errors.email && <p>{errors.email}</p>}

    <input
        type="password"
        name="password"
        value={formData.password}
        onChange={handleChange}
    />
    {errors.password && <p>{errors.password}</p>}

    <button type="submit">Submit</button>
</form>

5. 可选：使用第三方库

虽然手动添加验证是很有教育意义的，但在实际项目中，为了提高开发效率和减少维护成本，通常会选择使用第三方库，例如 Formik 加上 Yup 进行表单处理和验证。

以上就是在React组件中添加表单验证的基本步骤。通过这种方式，你可以确保在数据发送到服务器之前，用户的输入是符合要求的。