电子邮件域的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" />