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

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

这应该是正确的模式

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

是的你忘了考虑小写.

您可以参考此文档以获取更多详细信息

HTML5的表单验证,与正则表达式

Answer 2

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

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

与输入类型的电子邮件一起使用时看起来像这

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