使用 HTML5 必需属性和正则表达式模式进行电子邮件验证答案

【问题标题】：Email Validation with HTML5 Required Attribute plus Regular Expression Pattern使用 HTML5 必需属性和正则表达式模式进行电子邮件验证
【发布时间】：2018-09-13 14:39:51
【问题描述】：

我正在对“电子邮件”字段使用原生 HTML5 验证，它工作正常！但是，我想将其增加到一个特定的情况，我不想接受带有“免费”域（gmail、hotmail 等）的电子邮件。

我做了正则表达式并对其进行了测试，它工作正常（您可以在这里进行测试：https://regex101.com/r/wBt3YN/1）。但是当应用到电子邮件字段的模式时，什么都没有发生。

如何进行？

一些字符串：

maykel@gmail.com -> 不允许

maykel@marfin.com -> 可以允许

maykel@outlook.com -> 不允许

正则表达式模式

^([\w-.]+@(?!gmail\.com)(?!yahoo\.com)(?!hotmail\.com)(?!mail\.com)(?!live\.com)(?!aol\.com)(?!outlook\.com)(?!bol\.com)(?!msn\.com)(?!ymail\.com)([\w-]+.)+[\w-]{2,4})?$

我的表单

<form>
  <div class="field">
    <label for="email">Email Corporativo</label>
        <input 
          type="email" 
          name="email" 
          id="email" 
          value="" 
          pattern="^([\w-.]+@(?!gmail\.com)(?!yahoo\.com)(?!hotmail\.com)(?!mail\.com)(?!live\.com)(?!aol\.com)(?!outlook\.com)(?!bol\.com)(?!msn\.com)(?!ymail\.com)([\w-]+.)+[\w-]{2,4})?$" 
          title="Utilize seu email corporativo" 
          placeholder="" 
          required
        >
  </div>
  <input type="submit" value="ENVIAR">
</form>

【问题讨论】：

您是否测试了有关如何使用 Web 客户端开发工具处理表单的断言？
@jdv 我该怎么做？
大多数浏览器都有“开发者”模式。例如，Windows 上的 Chrome 使用 F12。您的浏览器/平台可能不同，但只需搜索“浏览器开发者模式”即可获得所需的所有信息。
我在我的 chrome 上得到了它，但我不知道它对我有什么帮助。
在我的控制台上哪里可以看到一些有用的信息？

标签： regex html validation

【解决方案1】：

这是我不允许使用 yahoo 和 hotmail 的代码。但是，电子邮件验证是一件非常微妙的事情。

<form>
  <div class="field">
    <label for="email">Email Corporativo</label>
        <input 
          type="email" 
          name="email" 
          id="email" 
          value="" 
          pattern="^[^@]+@(?!(yahoo|hotmail))[^@]+\.[a-z]{2,}$" 
          title="Utilize seu email corporativo" 
          placeholder="" 
          required
        >
  </div>
  <input type="submit" value="ENVIAR">
</form>

【讨论】：

像魅力一样工作！谢谢！