pattern 和 type="email" 一起使用是一个问题吗？

Question

HTML5 电子邮件类型和模式

在使用新的 HTML5 type 值（例如 email、tel 之间是否存在任何问题、冲突或其他问题, 等）与 pattern 属性结合使用。

我指的不是 HTML5 浏览器兼容性 — 只是这些属性的新值在与 pattern 属性一起使用时产生的直接影响。

为了清楚起见，我将使用 type="email"

举几个例子

一个。仅限类型属性。

<input type="email">

乙。只有模式属性

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

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

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

我觉得您使用新的 HTML5 类型值获得了更多的语义价值；但是，正则表达式更易于控制，因为 email@localhost 仅通过使用的电子邮件值有效。

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

编辑

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

As both ways of validating email addresses has their pros and cons it is up to you to decide which one to use. You should not try to use them both at the same time as this might induce a clash in browsers that support both features. Using type=”email” has the advantage that it is semantically correct both using the pattern attribute has the advantage that there are several easy-to-use polyfills on the web which ensures support for a greater range of audience.

Source

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

Answer 1

必要性

pattern 属性在任何完全符合 HTML5 关于如何实现各种 type 状态的规范的浏览器上都不是必需的。

例如，type=email input 元素应该如何实现：

If the multiple attribute isn't specified...
While the value of the element is neither the empty string nor a single valid e-mail address, the element is suffering from a type mismatch.
If the multiple attribute is specified...
The value attribute, if specified, must have a value that is a valid e-mail address list.

— HTML5 Specification's Email State (type=email)

在真正基本的术语中，这意味着如果输入空字符串或有效电子邮件地址，元素的 value 将 return 为空。这意味着浏览器应尝试验证不存在 pattern 属性的电子邮件地址。如果存在 pattern 属性，浏览器和指定的正则表达式都会被考虑在内。

实用性

尽管没有必要，您可能仍希望使用 pattern 属性来仅捕获特定类型的输入。例如，admin@mailserver1 是一个有效的电子邮件地址 (according to Wikipedia)，您可能希望明确只允许具有 TLD 的电子邮件地址。这同样适用于特定地区的 phone 号码。

Answer 2

似乎在许多浏览器中，默认浏览器功能胜过任何自定义功能。我运行在尝试考虑国际电子邮件地址（非字母数字语言）时遇到了这个问题。

$(document).ready(function() {
  var $emails = $('li pre'),
    form = $('form').get(0),
    $input = $('input');

  $emails.each(function() {
    $input.val($(this).text());
    if (form.checkValidity()) {
      $(this).addClass('success').removeClass('fail');
    } else {
      $(this).removeClass('success').addClass('fail');
    }
  });
  
  $input.val('');
});

.success {
  color: green;
}

.fail {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="https://en.wikipedia.org/wiki/International_email">Valid</a> Email Addresses:
<ul>
  <li><pre>Abc@example.com</pre></li>
  <li><pre>Abc.123@example.com</pre></li>
  <li><pre>user+mailbox/department=shipping@example.com</pre></li>
  <li><pre>!#$%&'*+-/=?^_`.{|}~@example.com</pre></li>
  <li><pre>"Abc@def"@example.com</pre></li>
  <li><pre>"Fred Bloggs"@example.com</pre></li>
  <li><pre>"Joe.\Blow"@example.com</pre></li>
  <li><pre>用户@例子.广告</pre></li>
  <li><pre>उपयोगकर्ता@उदाहरण.कॉम</pre></li>
  <li><pre>юзер@екзампл.ком</pre></li>
  <li><pre>θσερ@εχαμπλε.ψομ</pre></li>
  <li><pre>Dörte@Sörensen.example.com</pre></li>
</ul>

<form>
  <input type="email" name="email" pattern=".+@.+" placeholder="XXXX@XXXX" title="XXXX@XXXX" required />
  <button type="submit">
    Submit
  </button>
</form>

浏览器测试结果：https://www.browserstack.com/screenshots/0f88466bf4bd5fc4cdec39a7618ed8afc9c82806

pattern 和 type="email" 一起使用是一个问题吗？

Is both pattern and type="email" used in conjunction an issue?

html

attributes

HTML5 电子邮件类型和模式

编辑

必要性

实用性