24 表单处理之表单验证

在上一篇中，我们探讨了如何处理用户输入，并使用 React 结合 TypeScript （简称 TSX）来管理表单的状态和事件。在这一篇中，我们将深入探讨如何对用户输入进行有效的表单验证，确保我们收集到的数据是有效的、完整的以及符合预期的格式。

什么是表单验证？

表单验证是指在用户提交表单数据之前，检查这些数据是否符合特定条件的过程。这些条件可以包括但不限于：

• 字段是否为空
• 输入的格式是否正确（如邮箱、电话号码等）
• 输入的长度是否满足限制
• 确保两个字段的值相等（如密码和确认密码）

表单验证通常分为两类：前端验证和后端验证。本篇教程主要关注前端验证，但请注意，始终需要在后端进行验证，以确保数据安全和准确。

基本的表单验证逻辑

在 TSX 中，我们可以使用状态管理来实现表单验证。这里是一个简单的表单组件示例，我们会添加一些基本的验证规则。

import React, { useState } from 'react';

const FormValidationExample: React.FC = () => {
  const [formData, setFormData] = useState({
    email: '',
    password: '',
    confirmPassword: ''
  });

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

  const validateEmail = (email: string) => {
    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return regex.test(email);
  };

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
    setErrors({ ...errors, [name]: '' }); // 清除任何当前的错误消息
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    let valid = true;
    const newErrors = { email: '', password: '', confirmPassword: '' };

    if (!formData.email) {
      newErrors.email = '邮箱不能为空。';
      valid = false;
    } else if (!validateEmail(formData.email)) {
      newErrors.email = '请输入有效的邮箱地址。';
      valid = false;
    }

    if (!formData.password) {
      newErrors.password = '密码不能为空。';
      valid = false;
    } else if (formData.password.length < 6) {
      newErrors.password = '密码必须至少包含6个字符。';
      valid = false;
    }

    if (formData.password !== formData.confirmPassword) {
      newErrors.confirmPassword = '密码和确认密码必须匹配。';
      valid = false;
    }

    setErrors(newErrors);
    
    if (valid) {
      // 输入有效，可以进行后续操作，如提交数据
      console.log('提交数据: ', formData);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="email">邮箱:</label>
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleInputChange}
        />
        {errors.email && <span style={{ color: 'red' }}>{errors.email}</span>}
      </div>
      <div>
        <label htmlFor="password">密码:</label>
        <input
          type="password"
          name="password"
          value={formData.password}
          onChange={handleInputChange}
        />
        {errors.password && <span style={{ color: 'red' }}>{errors.password}</span>}
      </div>
      <div>
        <label htmlFor="confirmPassword">确认密码:</label>
        <input
          type="password"
          name="confirmPassword"
          value={formData.confirmPassword}
          onChange={handleInputChange}
        />
        {errors.confirmPassword && <span style={{ color: 'red' }}>{errors.confirmPassword}</span>}
      </div>
      <button type="submit">提交</button>
    </form>
  );
};

export default FormValidationExample;

代码讲解

1. 状态管理：我们使用 useState 来管理表单数据和错误信息。formData 存储用户输入的值，errors 存储各个字段的错误信息。

2. 验证函数：我们定义了 validateEmail 函数，用于检查邮箱格式是否正确。这个函数使用了正则表达式。

3. 输入处理：在 handleInputChange 函数中，我们更新对应字段的值，并清除任何当前的错误消息。

4. 表单提交：在 handleSubmit 函数中，我们进行所有字段的验证。如果有错误，我们更新 errors 状态并阻止表单提交；如果验证通过，我们可以执行数据提交操作。

5. 错误提示：在渲染的表单中，如果有错误信息，会立刻在相应字段下方展示错误提示。

总结

通过这个表单验证的例子，我们可以有效地控制用户输入，确保数据的有效性。在表单复杂度更高的情况下，可以扩展验证逻辑或使用第三方库（如 Formik 和 Yup）来简化表单处理和验证。

在下一篇文章中，我们将会讨论如何与 API 交互，通过 Axios 获取数据并整合到组件中。这是构建现代 Web 应用的重要步骤，也是当今前端开发中不可或缺的一部分。