电子邮件域的 HTML 输入模式

Question

我尝试使用HTML输入标记的模式属性，使用以下代码对特定电子邮件域进行简单的客户端验证：

<input type="text" pattern="^[A-Z0-9._%+-]+@domain\.com\.ph$" />

我预计以下输入会成功： test.test@domain.com.ph

但不知怎的，它似乎不起作用。我使用了不正确的正则表达式吗吗？

为了消除一些答案，我尝试检查以下内容：

• 浏览器支持模式验证
• 模式^[A-Z0-9._%+-]+@domain.com.ph$
• 模式^[A-Z0-9._%+-]+@domain.com.ph

Answer 1

移除锚点^和$。使用时不需要这些pattern。

并且0-9A-Za-z_在字符类中可以替换为\w.

input:valid {
  color: green;
}
input:invalid {
  color: red;
}

<input type="text" pattern="[\w.%+-]+@domain\.com\.ph" />