注册组件表单验证求助：邮箱与手机号格式校验实现

现有代码问题梳理 #

• 手机号输入框的type错误设置为email，应改为tel
• 仅判断字段是否为空，未实现格式校验逻辑
• 错误提示过于笼统，无法区分是空字段还是格式错误

修改后的完整代码 #

import { useState } from 'react';

export default function Form() {
  // 注册信息状态
  const [firstname, setFirstName] = useState('');
  const [lastname, setLastName] = useState('');
  const [email, setEmail] = useState('');
  const [phonenumber, setPhoneNumber] = useState('');

  // 错误状态：细分邮箱、手机号的格式错误，以及全局空字段错误
  const [submitted, setSubmitted] = useState(false);
  const [emailError, setEmailError] = useState('');
  const [phoneError, setPhoneError] = useState('');
  const [emptyError, setEmptyError] = useState(false);

  // 邮箱格式正则（保留你提供的正则）
  const emailRegex = /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
  // 手机号格式正则（示例为国内手机号，可根据需求调整）
  const phoneRegex = /^1[3-9]\d{9}$/;

  // 处理邮箱输入，实时校验格式
  const handleEmail = (e) => {
    const value = e.target.value;
    setEmail(value);
    setSubmitted(false);
    // 实时校验格式
    if (value && !emailRegex.test(value)) {
      setEmailError('请输入正确的邮箱格式');
    } else {
      setEmailError('');
    }
  };

  // 处理手机号输入，实时校验格式
  const handlePhoneNumber = (e) => {
    const value = e.target.value;
    setPhoneNumber(value);
    setSubmitted(false);
    // 实时校验格式
    if (value && !phoneRegex.test(value)) {
      setPhoneError('请输入正确的手机号格式');
    } else {
      setPhoneError('');
    }
  };

  // 表单提交处理
  const handleSubmit = (e) => {
    e.preventDefault();
    // 先清空所有错误状态
    setEmptyError(false);
    setEmailError('');
    setPhoneError('');

    // 1. 检查字段是否为空
    if (!email || !phonenumber) {
      setEmptyError(true);
      return;
    }

    // 2. 检查格式是否正确
    const isEmailValid = emailRegex.test(email);
    const isPhoneValid = phoneRegex.test(phonenumber);

    if (!isEmailValid) {
      setEmailError('请输入正确的邮箱格式');
    }
    if (!isPhoneValid) {
      setPhoneError('请输入正确的手机号格式');
    }

    // 3. 所有校验通过
    if (isEmailValid && isPhoneValid) {
      setSubmitted(true);
    }
  };

  // 空字段错误提示
  const emptyErrorMessage = () => {
    return emptyError ? (
      <div className="error">
        <h1>请填写所有必填字段</h1>
      </div>
    ) : null;
  };

  // 成功提示（补充原代码缺失的函数）
  const successMessage = () => {
    return submitted ? (
      <div className="success">
        <h1>提交成功！</h1>
      </div>
    ) : null;
  };

  return (
    <div className="form">
      <div className="messages">
        {emptyErrorMessage()}
        {successMessage()}
      </div>
      <div className='inputval'>
        <div className="d-flex justify-content-center flex-column">
          <label className="label">Email</label>
          <input 
            onChange={handleEmail} 
            className="input"
            value={email} 
            type="email" 
          />
          {/* 邮箱格式错误提示 */}
          {emailError && <div className="error-text">{emailError}</div>}

          <label className="label">Phone Number</label>
          <input 
            onChange={handlePhoneNumber} 
            className="input"
            value={phonenumber} 
            type="tel"  {/* 修复type错误 */}
          />
          {/* 手机号格式错误提示 */}
          {phoneError && <div className="error-text">{phoneError}</div>}
        </div>
        
        <div className="d-inline-block justify-content-center align-items-center">
          <button className="btn" onClick={handleSubmit} type="submit">
            Submit
          </button>
        </div>
      </div>
    </div>
  );
}

关键修改说明 #

• 输入框类型修复：手机号输入框type改为tel，符合语义且移动端会弹出数字键盘
• 细分错误状态：新增emailError、phoneError、emptyError，分别对应不同错误场景，提示更精准
• 实时校验+提交校验：输入时实时反馈格式问题，提交时再次全量校验，双重保障
• 正则校验实现：使用你提供的邮箱正则，同时添加手机号正则（可根据地区需求调整）
• 补充缺失组件：完善了原代码中未定义的successMessage函数

内容的提问来源于stack exchange，提问作者Prashant Potluri