Question

我是HTML5的新手......

这里我遇到了电子邮件模式属性的问题......

1）如果我在电子邮件领域提供类似user@gmail.com的输入..

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

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

以下是Html的片段

<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>

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

Answer 1

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

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

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

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

Answer 2

这应该是正确的模式

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

是的，你忘了考虑小写。

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

html5-form-validation-with-regex

Answer 3

您也需要考虑较小的案例。或者使它不区分大小写。但实际上你应该使用：

^.+@.+$

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

Answer 4

使用HTML5属性＆＃34; pattern＆＃34;很难正确验证电子邮件。如果你不使用＆＃34;模式＆＃34;某人@将被处理。这不是有效的电子邮件。

使用pattern =＆＃34; [a-zA-Z] {3，} @ [a-zA-Z] {3，} [。] {1} [a-zA-Z] {2，} {1} [A-ZA-Z] {2，}＆＃34 [。];将要求格式为someone@email.com

Answer 5

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

Answer 6

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

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

Answer 7

我的解决方案覆盖html5验证类型='电子邮件'。我在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')
})

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

7 个答案: