vue中如何實現手機號和郵箱正則驗證以及60s發送驗證碼功能

這篇文章將為大家詳細講解有關vue中如何實現手機號和郵箱正則驗證以及60s發送驗證碼功能，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

寫一個簡單的驗證，本來前面用的組件，但是感覺寫的組件在此項目不是很好用，由于用到的地方比較少，所以直接寫在了頁面中。

<div>
 <p class="fl">
  <input name="phone" type="number" placeholder="手機號" v-model="phone"/>
  <button type="button" :disabled="disabled" @click="sendcode" class="btns">{{btntxt}}</button>
 </p>
 <p class="fl" >
  <input type="text" placeholder="驗證碼"/>
 </p>
</div>
<input type="button" value="查詢" class="btns search" @click="query"/>

這里是script里的內容

export default {
   data: function () {
   return {
    disabled:false,
    time:0,
    btntxt:"獲取驗證碼",
    formMess:{
     email:this.email,
     phone:this.phone
    }
   }
   },
   mounted: function () {
    
   },
  methods:{
   //驗證手機號碼部分
   sendcode(){
    var reg=11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
    //var url="/nptOfficialWebsite/apply/sendSms?mobile="+this.ruleForm.phone;
    if(this.phone==''){
     alert("請輸入手機號碼");
    }else if(!reg.test(this.phone)){
     alert("手機格式不正確");
    }else{
     this.time=60;
     this.disabled=true;
     this.timer();
     /*axios.post(url).then(
      res=>{
      this.phonedata=res.data;
     })*/
    }
   },
   timer() {
    if (this.time > 0) {
      this.time--;
      this.btntxt=this.time+"s后重新獲取";
      setTimeout(this.timer, 1000);
    } else{
      this.time=0;
      this.btntxt="獲取驗證碼";
      this.disabled=false;
    }
   },
   query(){
    var formMess=this.formMess
    Axios.post(api+"/order/select/reception", formMess)
     .then(function (res) {
      if(res.data.code==200){
       console.log(res.data.data);
       this.productResult=res.data.data;
       this.productResult.length=3;
      }else if(res.data.code==400){
       alert(res.data.message)
      }
      
     }.bind(this))
   },
   //郵箱驗證
   sendEmail(){
    var regEmail= /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
    if(this.email==''){
     alert("請輸入郵箱");
    }else if(!regEmail.test(this.email)){
     alert("郵箱格式不正確");
    }
   }
  }
 }

關于“vue中如何實現手機號和郵箱正則驗證以及60s發送驗證碼功能”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。