Vue实现简易邮箱输入验证

本文中的代码将使用自定义全局组件，emit派发以及正则来实现一个简易的邮箱输入验证功能，用以验证邮箱地址格式是否正确，如果正确则在输入框的后方同步显示true，如果错误则显示false。

 

邮箱地址我们规定为：

前缀是字母、数字或者下划线，并且长度在3位以上15位以下，后缀是小写字母构成，且长度为2位或者3位。

例如：[email protected]                false（前缀不在3位以上）

           [email protected]     true

 

下面为代码，已含适量注释：

  

     
    {{mail}}
  


  

 

最后为效果演示：