Vue实现简易邮箱输入验证

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

 

邮箱地址我们规定为：

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

例如：ab@152.cn                false（前缀不在3位以上）

           sbd1221@163.com     true

 

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

  <div id="app">
    <custom-mail v-model="mail"></custom-mail> <!-- 使用全局组件 -->
    {
  {mail}}
  </div>


  <script>

    Vue.component('custom-mail', {    //全局组件
      template: `
    <input type="text"
@input="handleInput($event)"
    />
    `,
      method