电子邮件域的 HTML 输入模式答案

【问题标题】：HTML input pattern for an email domain电子邮件域的 HTML 输入模式
【发布时间】：2015-10-24 08:10:31
【问题描述】：

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

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

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

但不知何故，它似乎不起作用。我是否使用了不正确的 regex？

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

【问题讨论】：

【解决方案1】：

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

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

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

&lt;input type="text" pattern="[\w.%+-]+@domain\.com\.ph" /&gt;

【讨论】：