vue登录具体实例的正则验证

引入了jquery和elementUi

<template>
      <div class="mask">
        <div class="register">
          <div class="back" @click="back">
          </div>
          <div class="QuickLogin">
            <div class="quick" @click="quick">快捷登录</div>
            <div class="passLogin"  @click="passLogin">密码登录</div>
          </div>
          <div class="InputSector" v-show="InputSector">
            <div class="input">
              <div class="inputsec"><input type="text" maxlength="11" placeholder="手机号" class="inputText" v-model="phoneNum" @keyup="phone"></div>
              <div class="inputsec"><input type="text" placeholder="验证码" class="inputText text" v-model="yanzhengma"><div class="catchTime" @click="catchTime" v-show="timimg">获取验证码</div><div class="catchTime  Time" v-show="timimg==false">{{times}}s后重发</div></div>
              <div class="inputsec"><input type="submit" class="logon logon1" value="登录" @click="sub" ></div>
            </div>
            <p class="illustration">免注册，登录即创建账户</p>
          </div>
          <div class="InputSector2" v-show="InputSector==false">
            <div class="input">
              <div class="inputsec"> <input type="text"  placeholder="手机号" maxlength="11" class="inputText" v-model="phoneNum2" @keyup="phone2"></div>
              <div class="inputsec"><input type="text" placeholder="密码" class="inputText" v-model="password"></div>
              <div class="inputsec"><input type="submit" class="logon logon2" value="登录" @click="sub2"></div>
            </div>
          </div>
        </div>
      </div>
</template>
<script>
  import $ from "jquery";
  export default {
    name: "Header",
    data(){
      return{
        password:"",
        phoneNum:"",
        phoneNum2:"",
        yanzhengma:"",
        timimg:true,
        times:60,
        InputSector:true
      }
    },
    methods:{
      //返回键：时间归于60s
      back(){
        this.times=60;
        this.timimg=true;
      },


      //变换点击样式
      quick(){
        $('.quick').css({"border-bottom":"4px solid #FF7DA0"})
        $('.passLogin').css({"border-bottom":"none"})
        this.InputSector=true
      },
      passLogin(){
        $('.passLogin').css({"border-bottom":"4px solid #FF7DA0"})
        $('.quick').css({"border-bottom":"none"})
        this.InputSector=false
      },


      //获取验证码倒计时
      time(){
        let   timer=setInterval(()=> {
          this.times--;
          if(this.times<0){
            clearInterval(timer)
            this.times=60;
            this.timimg=true;
          }
        },1000);
      },
      catchTime(){
        this.timimg=false
        this.time()
      },


      //手机号的正则验证
      phone(){
        console.log(this.phoneNum)
        if((this.phoneNum).length==11){
          let phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/;
          if (!phoneReg.test(this.phoneNum)) {
            this.$message('手机号输入错误');
          } else {
            $(".logon1").css({"background-color":"#FF2661"})
          }
        }
      },
      phone2(){
        console.log(this.phoneNum2)
        if((this.phoneNum2).length==11){
          let phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/;
          if (!phoneReg.test(this.phoneNum2)) {
            this.$message('手机号输入错误');
          } else {
            $(".logon2").css({"background-color":"#FF2661"})
          }
        }
      },



      //提交时不正确的提示
      sub(){
        if((this.phoneNum)=="" ){
          this.$message('请正确填入手机号');
        }else if( (this.yanzhengma)==""){
          this.$message('请正确填入验证码');
        }
      },
      sub2(){
        if((this.phoneNum2)=="" ){
          this.$message('请正确填入手机号');
        }else if( (this.password)==""){
          this.$message('请正确填入密码');
        }
      }
    }
  }
</script>

<style scoped>
  .mask{
    position: fixed;
    right:0;
    top:0;
    left:0;
    bottom:0;
    background-color: rgba(0,0,0,.6);
    z-index: 999;
  }
  .register{
    width:453px;
    height: 387px;
    background-color: #ffffff;
    position: absolute;
    margin:auto;
    top:0;
    bottom: 0;
    left: 0;
    right:0;
  }
  .QuickLogin{
    margin-top: 50px;
    height: 33px;
    font-size: 20px;
    color: #262626
  }
  .QuickLogin{
    display: flex;
    justify-content: space-evenly;
  }
  .QuickLogin>div{
    padding-bottom: 9px;
  }
  .quick{
    border-bottom: 4px solid #FF7DA0;
  }
  .inputText{
    width:328px;
    height:34px;
    padding: 7px 0 7px 13px;
    font-size: 14px;
  }
  .text{
    width:221px;
    height:34px;
    padding: 7px 0 7px 13px;
    font-size: 14px;
    display: inline-block;
  }
  .InputSector, .InputSector2{
    width:343px;
    margin:0 auto;
    padding:50px 55px;
  }
  .input>.inputsec{
    border: 1px solid #e5e5e5;
    margin-bottom: 10px;
    border-radius: 3px;
    display: inline-block;
  }
  .logon{
    width:341px;
    height: 44px;
    background-color:#FF7DA0;
    font-size:18px ;
    color: #ffffff;
    text-align: center;
    borer:none;
  }
  .illustration{
    font-size: 12px;
    color: #999;
    margin-top: 24px;
    text-align: center;
  }
  .back{
    background-image: url("http://dn-piaoniu-static.qbox.me/pc/ui/img/icon-close.ac2a7110.png");
    background-repeat: no-repeat;
    background-size: 44px;
    cursor: pointer;
    width:44px;
    height: 44px;
    position: absolute;
    top:0px;
    right: 0px;
  }
  .catchTime{
    font-size: 14px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    width:106px;
    float: right;
    color: #ea3667;
    border-left: 1px solid #e5e5e5;
    display: inline-block;
  }
</style>