React -将电子邮件验证添加到空输入验证

import React, { useState } from 'react';

const EmailVerificationForm = () => {
  const [email, setEmail] = useState('');
  const [errorMessage, setErrorMessage] = useState('');

  const handleEmailChange = (e) => {
    setEmail(e.target.value);
  };

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

    if (email.trim() === '') {
      setErrorMessage('请输入电子邮件地址');
      return;
    }

    // 使用正则表达式或电子邮件验证库进行电子邮件验证
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(email)) {
      setErrorMessage('请输入有效的电子邮件地址');
      return;
    }

    // 执行电子邮件验证成功的操作

    setErrorMessage('');
    // 显示成功消息或执行其他逻辑
  };

  return (
    <form onSubmit={handleFormSubmit}>
      <input
        type="email"
        value={email}
        onChange={handleEmailChange}
        placeholder="请输入电子邮件地址"
      />
      <button type="submit">验证</button>
      {errorMessage && <p>{errorMessage}</p>}
    </form>
  );
};

export default EmailVerificationForm;