如何在react js中实现表单验证？

import React, { useState } from 'react';

const Form = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [nameError, setNameError] = useState('');
  const [emailError, setEmailError] = useState('');
  const [passwordError, setPasswordError] = useState('');

  const validateForm = () => {
    let isValid = true;

    if (name.trim() === '') {
      setNameError('请输入姓名');
      isValid = false;
    } else {
      setNameError('');
    }

    if (email.trim() === '') {
      setEmailError('请输入邮箱');
      isValid = false;
    } else if (!/\S+@\S+\.\S+/.test(email)) {
      setEmailError('请输入有效的邮箱');
      isValid = false;
    } else {
      setEmailError('');
    }

    if (password.trim() === '') {
      setPasswordError('请输入密码');
      isValid = false;
    } else if (password.length < 6) {
      setPasswordError('密码长度不能少于6位');
      isValid = false;
    } else {
      setPasswordError('');
    }

    return isValid;
  };

  const handleSubmit = (e) => {
    e.preventDefault();

    if (validateForm()) {
      // 表单验证通过，可以进行提交操作
      console.log('表单验证通过');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>姓名：</label>
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
          onBlur={() => {
            if (name.trim() === '') {
              setNameError('请输入姓名');
            } else {
              setNameError('');
            }
          }}
        />
        {nameError && <span>{nameError}</span>}
      </div>
      <div>
        <label>邮箱：</label>
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          onBlur={() => {
            if (email.trim() === '') {
              setEmailError('请输入邮箱');
            } else if (!/\S+@\S+\.\S+/.test(email)) {
              setEmailError('请输入有效的邮箱');
            } else {
              setEmailError('');
            }
          }}
        />
        {emailError && <span>{emailError}</span>}
      </div>
      <div>
        <label>密码：</label>
        <input
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          onBlur={() => {
            if (password.trim() === '') {
              setPasswordError('请输入密码');
            } else if (password.length < 6) {
              setPasswordError('密码长度不能少于6位');
            } else {
              setPasswordError('');
            }
          }}
        />
        {passwordError && <span>{passwordError}</span>}
      </div>
      <button type="submit">提交</button>
    </form>
  );
};

export default Form;