在React函数组件中利用原生HTML5进行邮箱地址验证

import React, { useState } from 'react';

function EmailValidationForm() {
  // 存储邮箱输入的值
  const [email, setEmail] = useState('');
  // 存储邮箱输入的有效性状态
  const [isValidEmail, setIsValidEmail] = useState(false);
  // 存储是否尝试过提交（用于在用户未输入前不显示错误）
  const [hasSubmitted, setHasSubmitted] = useState(false);

  // 处理输入框内容变化的函数
  const handleEmailChange = (event) => {
    const inputValue = event.target.value;
    const inputValidity = event.target.validity.valid; // 获取原生验证状态

    setEmail(inputValue);
    setIsValidEmail(inputValidity);
  };

  // 处理表单提交的函数
  const handleSubmit = (event) => {
    event.preventDefault(); // 阻止表单默认提交行为
    setHasSubmitted(true); // 标记已尝试提交

    if (isValidEmail) {
      alert(`邮箱地址有效: ${email}`);
      // 在这里可以执行提交逻辑，例如发送数据到后端
      console.log('提交的邮箱:', email);
    } else {
      alert('请输入有效的邮箱地址！');
      console.log('无效的邮箱:', email);
    }
  };

  return (
    <form onSubmit={handleSubmit} style={{ padding: '20px', border: '1px solid #ccc', borderRadius: '8px' }}>
      <h2>邮箱地址验证示例</h2>
      <div>
        <label htmlFor="emailInput">邮箱地址:</label>
        <input
          id="emailInput"
          type="email" // 关键：使用type="email"启用原生验证
          value={email}
          onChange={handleEmailChange}
          required // 可选：添加required属性，浏览器会在空值时提示
          style={{
            borderColor: hasSubmitted && !isValidEmail ? 'red' : '#ccc',
            borderWidth: '2px',
            padding: '8px',
            margin: '5px 0'
          }}
        />
        {/* 根据验证状态显示错误信息 */}
        {hasSubmitted && !isValidEmail && (
          <p style={{ color: 'red', fontSize: '0.9em' }}>请输入一个有效的邮箱地址。</p>
        )}
      </div>
      <button type="submit" disabled={!isValidEmail} style={{
        marginTop: '15px',
        padding: '10px 20px',
        backgroundColor: isValidEmail ? '#007bff' : '#cccccc',
        color: 'white',
        border: 'none',
        borderRadius: '5px',
        cursor: isValidEmail ? 'pointer' : 'not-allowed'
      }}>
        提交
      </button>
      <p style={{ marginTop: '10px', fontSize: '0.9em', color: '#666' }}>
        当前邮箱值: <strong>{email || '无输入'}</strong><br/>
        当前验证状态: <strong style={{ color: isValidEmail ? 'green' : 'red' }}>{isValidEmail ? '有效' : '无效'}</strong>
      </p>
    </form>
  );
}

export default EmailValidationForm;