电子邮件验证的模式属性在 html5 中不起作用

Question

使用 Html5 我有一个包含电子邮件输入字段的视图。

所以为了验证正确的电子邮件地址，我使用模式属性进行验证。

但这不能正常工作，我在这里面临的问题是虽然我输入了无效的电子邮件地址为abc@gmail，但验证不起作用。 我在提琴手中测试了相同的正则表达式模式，它在那里工作正常，但进入我的应用程序它不能正常工作。这个你能帮我吗。 这是我的看法：

<form>

  <input type="email" 
    class="form-control" 
    data-val="true" 
    data-val-required="please enter an email address"
    pattern="[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,4}$" 
    required>
  
  <input type="submit" />
</form>  

Answer 1

正则表达式应该是
[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,}$

而不是
[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,4}$

所以 html 输入将是：

<input type="email"
   class="form-control"
   data-val="true"
   data-val-required="please enter an email address"
   pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
   required>

注意：正则表达式的区别是 {2,} 和 {2,4}