既是模式又是类型="；电邮；结合使用和发行？ HTML5电子邮件类型和模式

将新的HTML5

类型

值（例如电子邮件、电话等）与

模式

属性结合使用是否存在任何问题、冲突或其他问题

我不是指HTML5浏览器兼容性，只是指这些属性的新值与

模式

属性一起使用时产生的直接影响。

<input type="email">

为了清楚起见，我将使用

type=“email”

A.仅限类型属性。

<input type="email">

B.仅模式属性

<input type="text" pattern="[email regex]">

C.电子邮件和模式属性一起使用

<input type="email" pattern="[email regex]">

我觉得通过新的HTML5类型值，您可以获得更多的语义价值；然而，正则表达式比email@localhost仅通过使用的电子邮件值有效

如果他们是重复的，我道歉，我环顾四周，但没有看到这个问题

编辑 我发现两者结合使用时可能会产生负面影响。然而，我不确定消息来源的可信度

由于两种验证电子邮件地址的方法都有其优缺点，所以由您决定使用哪种方法您不应同时使用这两种功能，因为这可能会导致支持这两种功能的浏览器发生冲突。使用type=“email”的优点是语义正确。使用pattern属性的优点是，web上有多个易于使用的多边形填充，可确保对受众范围更广

如果两者同时使用，请确保彻底测试。如果发现任何负面影响，我会更新问题。

在任何完全符合HTML5规范的浏览器上，对于如何实现各种

类型
状态，
模式属性应该是不必要的

例如，这就是
type=email
input
元素的实现方式：

如果未指定
multiple
属性。。。
虽然元素的值既不是空字符串，也不是单个有效电子邮件地址，但该元素存在类型不匹配问题

如果指定了
multiple
属性。。。
如果指定值属性，的值必须为

-

在真正基本的术语中，这意味着如果输入了空字符串或有效的电子邮件地址，元素的
值将返回空。这意味着浏览器应尝试验证不存在
模式
属性的电子邮件地址。如果存在
模式
属性，则将同时考虑浏览器和指定的正则表达式

有用性
尽管没有必要，但您可能仍然希望使用
模式
属性仅捕获特定种类的输入。例如，
admin@mailserver1
是一个有效的电子邮件地址（），您可能希望明确只允许具有TLD的电子邮件地址。这同样适用于特定地区的电话号码。
似乎在许多浏览器中，默认浏览器功能胜过任何自定义功能。我在尝试计算国际电子邮件地址（非字母数字语言）时遇到了这个问题


$（文档）.ready（函数（）{
var$emails=$（'li pre'），
form=$（'form'）。获取（0），
$input=$（'input'）；
$emails.each（函数（）{
$input.val（$（this.text（））；
if（form.checkValidity（））{
$（this）.addClass（'success'）.removeClass（'fail'）；
}否则{
$（this）.removeClass（'success'）.addClass（'fail'）；
}
});
$input.val（“”）；
});
。成功{
颜色：绿色；
}
.失败{
颜色：红色；
}

电邮地址：

Abc@example.com
美国广播公司。123@example.com
用户+邮箱/部门=shipping@example.com
！#$%&'*+-/=？^ `。{|}~@example.com
"Abc@def“@example.com
“Fred Bloggs”@example.com
“Joe。\\Blow”@example.com
用户@例子.广告
उपयोगकर्ता@उदाहरण.कॉम
ю
θσερ@εχαμπλε.ψμ
德奥rte@Sörensen.example.com

提交
在我理解规范的地方，仅使用
email
值，在我的情况下，通过实时验证，返回了多个缺少TLD（.com等）的字符串。因此，我更想知道，如果将两者结合使用，那么实际的规范@darcher是否存在问题，这可能是因为缺少TLD的电子邮件地址是有效的。我已经更新了我的答案以反映这一点。“这意味着在这种情况下，验证电子邮件地址取决于浏览器。”您可能需要澄清这一点。这取决于浏览器的内置验证和模式属性。谢谢，感谢您的洞察力（由规范支持）@JamesDonnelly我还更新了这个问题，提到了当两者都使用并且都受支持时可能产生的副作用。但没有任何证据支持这一说法。我想我会把它贴出来的。