对vue中的input输入框进行邮箱验证方式

//给输入框添加事件函数
 <el-input prefix-icon="el-icon-message" v-model="email" @blur="OnSubscribe()"></el-input>

//事件函数的逻辑
 OnSubscribe() {
      //邮箱验证的正则表达式
      const reg = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
      let str = this.email;
      if (reg.test(str)) {
        // 这里是邮箱验证成功的代码
        subscribe({
          e_mail: this.email,
          state: this.state,
          notes: this.notes
        }).then(res => {
          console.log(res);
          if (res.data.code === 20000) {
            this.$message.success("Subscribe to the success");
          } else {
            this.$message.warning(res.data.message);
            return false;
          }
        });
      } else {
            this.$message.warning("Email format error");
      }
    }

<template>
    <div id="email">
  		<h3>
      		邮箱:
    	</h3>
    <br>
    <input type="email" v-model="email" @blur="email_blur">
    <br>
      <h4>
        <span style="color: red">
    		{{message}}
    	</span>
      </h4>
    <br>
    
  </div>
</template>
1234567891011121314151617
<script>
    export default {
        name: "Email",
        data() {
            return {
                email: '',
                message: ''
            }
        },
        methods: {
            email_blur() {
                var verify = /^\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/;
                if (!verify.test(this.email)) {
                    this.message = '邮箱格式错误, 请重新输入'
                } else {
                    this.message = '可以请求接口了'

                }
            },
        }

    }
</script>
1234567891011121314151617181920212223