React输入框正则验证问题：邮箱需以@gmail.com结尾但验证失败

你的验证失败是因为当前的正则规则只匹配了结尾的@gmail.com，但没有允许@前面的邮箱前缀内容，再加上type="email"的基础校验，导致合法的gmail邮箱也无法通过验证。

修正方案 #

把input的pattern属性改成完整的正则规则，匹配合法前缀 + @gmail.com结尾：

const CreatePeople = () => {
  return (
    <div className="people-form">
      <form action="#" id="create-people-form">
        <label htmlFor="create-people-email">Email</label>
        <input
          type="email"
          name="email"
          id="create-people-email"
          pattern="^[a-zA-Z0-9._%+-]+@gmail\.com$"
          title="请输入以@gmail.com结尾的邮箱地址"
          required
        />
        {/* unnecessary stuff */}
        <button type="submit">Finish</button>
      </form>
    </div>
  );
};

正则规则说明 #

• ^：锁定字符串开头
• [a-zA-Z0-9._%+-]+：匹配邮箱前缀，允许字母、数字和邮箱常用符号（.、_、%、+、-），+确保前缀至少有一个字符
• @gmail\.com：精确匹配@gmail.com，其中.用\.转义（正则中.是通配符，需要转义才能匹配实际的点）
• $：锁定字符串结尾

添加title属性后，验证失败时浏览器会显示自定义提示文案，提升用户体验。

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