HTML5电子邮件验证模式不验证.edu.au，甚至接受edu.a

Question

我应该只接受usyd.edu.au个电子邮件地址。验证有效，但它也适用于usyd.edu.a电子邮件。我希望它仅在输入完整的.au时接受。到目前为止，我可以使用的模式是：

input type="email", placeholder="Email" name="txtName" id="txtEmail" pattern="[a-z0-9._%+-]+@[usyd]+\.[edu]+\.[au]"/>

Answer 1

关闭但不正确。

[a-z0-9._%+-]+@[usyd]+\.[edu]+\.[au]

• [a-z0-9._%+-]+很简单允许a-z或0-9或。或_或％或+或-
• @仅允许@
• [usyd]+允许使用u，s，y或d中的一个或多个。可能只是'u'
• \.仅允许。

但是奥斯丁的建议也是错误的：

[a-z0-9._%+-]+@(usyd)+\.(edu)+\.(au)

• (usyd)+将允许您输入'usydusydusyd'
• (edu)+将允许您输入'edueduedueduedu'

没有理由使用括号。并且您绝对不希望使用'+'，因为它允许一个或多个。

相反，您需要这样做：

^[a-z0-9._%+-]+@usyd\.edu\.au$

这将确保在字符串的开头（“ ^”）没有奇数，并且字符串以'@usyd.edu.au'（“ $”）结尾

input:invalid {
  background: red;
}

<input type="email", placeholder="Email" name="txtName" id="txtEmail" pattern="[a-z0-9._%+-]+@usyd\.edu\.au"/>

Answer 2

您几乎明白了！如果将正则表达式最后3个位置的方括号[]更改为圆括号（），则它将按预期工作。 例如：[a-z0-9._%+-]+@(usyd)+\.(edu)+\.(au)

这是为什么：

• [au]将与括号中的单个字符匹配。 （a或u）
• (au)将匹配括号内的所有内容。 （恰好au）