Html5 模式属性与电子邮件不匹配（user@gmail.com）答案

【问题标题】：Html5 pattern attribute not matching for email(user@gmail.com)Html5 模式属性与电子邮件不匹配（user@gmail.com）
【发布时间】：2013-07-02 02:41:08
【问题描述】：

我是 HTML5 新手...

我在电子邮件模式属性方面遇到了一些问题......

1）如果我在电子邮件字段中提供 user@gmail.com... 之类的输入..

2）它不接受值并显示“模式不匹配”..

帮我解决这个问题....

这是Html的sn-p

<form name='f1' method="POST" action=""  >     
  <div id="fp">


        <span style="margin-left:-50px">Email:</span>&nbsp;&nbsp;
        <span><input  class="input" type="email" name="Email" placeholder="Enter mailID" required pattern="^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$" ></span><br>


         <input type="submit"  name="submit" value="submit">

   </div>
  </form>

任何建议都可以接受....

【问题讨论】：

看看haacked.com/archive/2007/08/21/…——它包含了很好的有效电子邮件地址示例，例如"Abc@def"@example.com（其中一个不错的）。

标签： regex html html-email email-validation html-input

【解决方案1】：

这应该是正确的模式

[^@]+@[^@]+\.[a-zA-Z]{2,6}

是的，你忘了考虑小写。

您可以参考此文档了解更多详情

html5-form-validation-with-regex

【讨论】：

但是它在那个字母之后检查到@，那么它没有考虑整体..例如..如果我输入像 user@g 它会把它当作电子邮件...但是实际上 user@gmail.com 是正确的格式...我该怎么做...
这从来都不是正确的。与国际化 TLD (info@example.xn--xkc2dl3a5ee0h) 或更长的 TLD (info@example.exchange) 不匹配
对于更长的域，^[^@]+@[^@]+\.[^@]+$ 怎么样？

【解决方案2】：

接受的答案不会验证 marian@iflove.technology 在这种情况下，不要错过您可以使用的所有新域名电子邮件，例如 http://www.iflove.technology/：

[^@]+@[^@]+\.[a-zA-Z]{2,}

与输入类型电子邮件一起使用，它看起来像这样：

<input type="email" pattern="[^@]+@[^@]+\.[a-zA-Z]{2,}">

【讨论】：

这仍然允许像“hello@world”这样的错误电子邮件示例

【解决方案3】：

您还需要考虑小写字母。或者让它不区分大小写。但实际上你应该只使用：

^.+@.+$

并向他们应该遵循的地址发送一封确认电子邮件，因为电子邮件地址相当复杂，您最终会阻止您不打算使用正则表达式的内容，并且不会阻止某人放置无论如何，在一个虚假的电子邮件地址中。

【讨论】：

这是此处所有答案中唯一正确的正则表达式。匹配所有可能的电子邮件地址的全功能正则表达式是一个页面长的灰色矩形，这会引起严重的头痛——请参阅ex-parrot.com/~pdw/Mail-RFC822-Address.html。

【解决方案4】：

仅使用 HTML5 属性“模式”很难正确验证电子邮件。如果您不使用“模式”someone@ 将被处理。这不是有效的电子邮件。

使用模式="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.] {1}[a-zA-Z]{2,}" 将要求格式为某人@email.com

【讨论】：

仍然不允许正确的电子邮件格式，例如“hello@world.com”

【解决方案5】：

只需删除pattern 属性。 type="email" 就够了。

【讨论】：

不正确。 HTML5 不会捕获像“hello@world”这样的错误电子邮件
@JesseNovotny 根据 RFC 进行全面检查很难做到正确且不切实际。对于通常的应用程序，最好让库和其他可用工具为您进行检查，即使它并不完美。要确定“hello@world”无效，您需要检查“world”是否为 FQDN。这对于文本输入来说太复杂了。例如，“spam@ai”是一个有效的电子邮件地址。

【解决方案6】：

我现在正在使用这种模式，似乎工作得很好：

[a-zA-Z0-9._\-]+@[a-zA-Z0-9.\-]+\.[a-zA-Z]{2,4}

【讨论】：

info@dot.swiss 不同意。

【解决方案7】：

我的解决方案覆盖 html5 验证 type='email'。我在加载 DOM 后运行此代码

$(document).ready(function(){
  $('input[type=email]').attr('pattern', "^([\\w]+[\\.]{0,1})+@([\\w-]+\\.)+[\\w]{2,4}$").attr('type', 'text').attr('title', 'Please enter an email address')
})

【讨论】：

info@dot.swiss 不同意。
hello@world 不同意