HTML5电子邮件验证

据说"有了HTML5，我们不再需要js或服务器端代码来检查用户的输入是否是有效的电子邮件或URL地址&quot。

如何在用户输入后验证电子邮件？ 如果用户输入错误的电子邮件地址，如何在没有JS的情况下显示信息。

<input type="email" pattern="[^ @]*@[^ @]*" placeholder="Enter your email">
<input type="submit" value="Submit">
Alireza Sabahi
已编辑的问题 22日 十月 2019 в 8:36
编程
html email
26日 十月 2013 в 10:48
17 种观点

在HTML5中，你可以这样做。


<input type="email" placeholder="Enter your email">
<input type="submit" value="Submit">

而当用户按下提交键时，它会自动显示一个错误信息，比如。

评论(12)

www.w3.org网站的input type=email页面指出，电子邮件地址是符合以下正则表达式的任何字符串。

/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/

使用required属性和pattern属性来要求值与正则表达式匹配。

<input
    type="text"
    pattern="/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/"
    required
>
Nick Larsen
编辑本段答案4日 一月 2019 в 2:47
评论(8)

仅仅使用HTML5属性"模式"来正确验证电子邮件是非常困难的。 如果你不使用"模式"，某人@将被处理。这不是有效的电子邮件。

Using pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}"将要求格式为someone@email.com，但如果发件人的格式为someone@email.net.au（或类似的）将无法被验证，为了解决这个问题，你可以把pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[。]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}"这将验证".com.au或.net.au或类似的。

然而，使用这个，它将不允许someone@email.com 来验证。 因此，就简单地使用HTML5来验证电子邮件地址而言，我们仍然不完全同意。要完成这一点，你会使用类似这样的东西。


<input id="email" type="text" name="email" pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}" required placeholder="Enter you Email">
<br>
<input type="submit" value="Submit The Form">

或。


<input id="email" type="text" name="email" pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}" required placeholder="Enter you Email">
<br>
<input type="submit" value="Submit The Form">

然而，我不知道如何使用HTML5模式属性来验证两个或所有版本的电子邮件地址。

Nakilon
编辑本段答案28日 三月 2017 в 5:08
评论(3)