Vue实现简易邮箱输入验证

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

邮箱地址我们规定为：

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

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

           [email protected]     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)"
    />
    `,
      methods: {                     
        validateMail(mail) {         //验证邮件规则
          //[email protected]
          return /^\w{3,15}\@\w+\.[a-z]{2,3}$/.test(mail);//前缀可以是字母或者数字，在3位以上15位以下，后缀是2位或者3位   \w:表示字母数字或者下划线
        },
        handleInput(event) {
          let mail = event.target.value;       //获取当前输入的email
          if (this.validateMail(mail)) {
            this.$emit('input', 'true')    //验证通过之后，通过emit派发事件
          } else {
            this.$emit('input', 'false')  //验证不通过
          }
        }
      }
    })


    var vm = new Vue({
      el: "#app",
      data: {
        mail: '',
      }
    })

  </script>

 

最后为效果演示：