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

如图效果，不是表单验证，是对input输入框的单独验证

可以给输入框添加@blur事件函数，代码如下

//给输入框添加事件函数
 <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");
      }
    }