据说"有了HTML5,我们不再需要js或服务器端代码来检查用户的输入是否是有效的电子邮件或URL地址"。
如何在用户输入后验证电子邮件? 如果用户输入错误的电子邮件地址,如何在没有JS的情况下显示信息。
<input type="email" pattern="[^ @]*@[^ @]*" placeholder="Enter your email">
<input type="submit" value="Submit">
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
>
仅仅使用HTML5属性"模式"来正确验证电子邮件是非常困难的。 如果你不使用"模式",某人@将被处理。这不是有效的电子邮件。
Using pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}"
将要求格式为[email protected]
,但如果发件人的格式为[email protected]
(或类似的)将无法被验证,为了解决这个问题,你可以把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或类似的。
然而,使用这个,它将不允许[email protected] 来验证。 因此,就简单地使用HTML5来验证电子邮件地址而言,我们仍然不完全同意。要完成这一点,你会使用类似这样的东西。
<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,}" required placeholder="Enter you Email">
<br>
<input type="submit" value="Submit The Form">
</form>
或。
<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">
</form>
然而,我不知道如何使用HTML5模式属性来验证两个或所有版本的电子邮件地址。