React使用useForm实现仅支持Gmail/Yahoo/Outlook的邮箱验证求助

问题根源 #

你的代码存在两个核心问题：

1. 正则表达式逻辑错误：原正则里的!gmail是取反规则，会直接排除Gmail邮箱，且整体结构混乱，无法正确匹配目标域名。
2. useForm的pattern配置错误：你注释的pattern代码里，用了/.test("email")，这会直接返回固定布尔值（因"email"不匹配正则，始终为false），而非传递正则表达式本身。

可行实现方案 #

直接利用react-hook-form的register自带验证能力，无需单独编写handleEmail方法，代码更简洁且符合useForm设计逻辑：

import { useForm } from "react-hook-form";

export default function RegisterForm() {
  const { register, formState: { errors } } = useForm();

  // 仅允许Gmail/Yahoo/Outlook的正则表达式
  const allowedEmailRegex = /^[\w.-]+@(gmail\.com|yahoo\.com|outlook\.com|yahoo\.co\.uk|outlook\.co\.uk)$/i;

  return (
    <form>
      <label className="label"> Email </label>
      <input 
        {...register("email", {
          required: "Please enter your Email",
          pattern: {
            value: allowedEmailRegex,
            message: "仅支持Gmail、Yahoo或Outlook邮箱"
          }
        })}
        placeholder="Enter your Email"
        id="email"
      />
      {/* 显示错误提示 */}
      {errors.email && <p style={{ color: "red" }}>{errors.email.message}</p>}
    </form>
  );
}

正则表达式说明 #

• ^[\w.-]+：匹配邮箱用户名部分，支持字母、数字、下划线、点和短横线
• @：匹配邮箱必备的@符号
• (gmail\.com|yahoo\.com|outlook\.com|yahoo\.co\.uk|outlook\.co\.uk)：枚举允许的邮箱域名，可根据需求添加更多子域名（如yahoo.co.jp等）
• $：匹配字符串结尾，确保邮箱格式完整无多余字符
• i：忽略大小写，支持GMAIL.COM、gmail.com等大小写混合的输入

额外优化 #

如果需要输入时实时触发验证（而非提交时才提示），可在初始化useForm时添加mode配置：

const { register, formState: { errors } } = useForm({ mode: "onChange" });

内容的提问来源于stack exchange，提问作者Theresa Dzeufack