html5验证电子邮件地址，大家都知道如何吗？

一个新值类型属性是电子邮件。使用这种类型的字段而不是一般的文本字段浏览器使用正则表达式来检查用户已经事实上输入一个电子邮件地址。这是否意味着用户不能输入一个虚假的电子邮件地址吗?没有。但你不必担心用户输入一个逗号,而不是一段时间,或者她不小心类型空间。无论用户是要提交,它将看起来像一个电子邮件地址。这是它的样子:

<form>
        <input type="email" required /> <br />
        <input type="submit" value="Submit Now!">
</form>

一些浏览器只寻找@和其他浏览器寻找在模式组成的一个@后面紧跟至少一个字母和一个点。


现在,这是不支持的如Internet Explorer 9.0及之前,或由Android浏览器版本。这意味着,为了有效的电子邮件验证这些浏览器你将不得不做出一个变通方法有这个功能工作在所有的浏览器。这并不意味着你不应该实现属性的电子邮件,因为如果浏览器不regocnize type = "电子邮件"这将只是治疗是类型=“文本”并使它作为普通文本。


使用模式验证电子邮件地址


另一种方法来验证电子邮件地址是使用模式属性。正如前面提到的在这一章关于模式,这种模式可以是任何你指定,它是基于正则表达式。我不会深入探讨这个主题的正则表达式,因为这是一个非常全面的学科。


所有你需要知道使用模式验证电子邮件地址是哪个模式使用。下面的HTML5的电子邮件地址的正则表达式是接近一个完整的例子,你的模式可以看起来像。(由于Gervase马卡姆)。这是什么模式看起来像:

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

正如您可以看到的模式是相当复杂的,但是基本上它检查用户输入是否看起来像一个正常的邮件地址如janedoe@unknown.com

<form>
        <input pattern="/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/" required /> 
        <br />
        <input type="submit" value="Submit Now!">
</form>

Type=”email” 或者模式?


作为的方式验证电子邮件地址有它们自己的优点和缺点是由你来决定使用哪一个。你不应该尝试使用他们两个在同一时间,因为这有可能引发一场冲突中,浏览器都支持这两个功能。使用Type=”email” 的优势在于,它是语义正确使用pattern属性都有优势,有几种简单易用的web上的polyfills,确保支持更大范围的观众。