欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue中手機(jī)號(hào),郵箱正則驗(yàn)證以及60s發(fā)送驗(yàn)證碼的實(shí)例

 更新時(shí)間:2018年03月16日 09:32:03   作者:Jarvan大熊  
下面小編就為大家分享一篇vue中手機(jī)號(hào),郵箱正則驗(yàn)證以及60s發(fā)送驗(yàn)證碼的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

今天寫(xiě)了一個(gè)簡(jiǎn)單的驗(yàn)證,本來(lái)前面用的組件,但是感覺(jué)寫(xiě)的組件在此項(xiàng)目不是很好用,由于用到的地方比較少,所以直接寫(xiě)在了頁(yè)面中。

<div>
 <p class="fl">
  <input name="phone" type="number" placeholder="手機(jī)號(hào)" v-model="phone"/>
  <button type="button" :disabled="disabled" @click="sendcode" class="btns">{{btntxt}}</button>
 </p>
 <p class="fl" style="margin-left: 20px;">
  <input type="text" placeholder="驗(yàn)證碼"/>
 </p>
</div>
<input type="button" value="查詢" class="btns search" @click="query"/>

這里是script里的內(nèi)容

export default {
   data: function () {
   return {
    disabled:false,
    time:0,
    btntxt:"獲取驗(yàn)證碼",
    formMess:{
     email:this.email,
     phone:this.phone
    }
   }
   },
   mounted: function () {
    
   },
  methods:{
   //驗(yàn)證手機(jī)號(hào)碼部分
   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("請(qǐng)輸入手機(jī)號(hào)碼");
    }else if(!reg.test(this.phone)){
     alert("手機(jī)格式不正確");
    }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="獲取驗(yàn)證碼";
      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))
   },
   //郵箱驗(yàn)證
   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("請(qǐng)輸入郵箱");
    }else if(!regEmail.test(this.email)){
     alert("郵箱格式不正確");
    }
   }
  }
 }

以上這篇vue中手機(jī)號(hào),郵箱正則驗(yàn)證以及60s發(fā)送驗(yàn)證碼的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • Vue項(xiàng)目中解決數(shù)字精度丟失問(wèn)題

    Vue項(xiàng)目中解決數(shù)字精度丟失問(wèn)題

    我們知道,浮點(diǎn)類型的數(shù)據(jù),在計(jì)算機(jī)中是以二進(jìn)制的方式存儲(chǔ)的,但是表示的數(shù)據(jù)也有個(gè)上限和下限,當(dāng)超過(guò)限制?,在計(jì)算機(jī)上顯示只能取最接近的限值,?數(shù)字解析精度丟失說(shuō)的就是這個(gè)現(xiàn)象,所以本文給大家介紹了Vue項(xiàng)目中解決數(shù)字精度丟失問(wèn)題的解決,需要的朋友可以參考下
    2024-02-02
  • Vue3新增時(shí)自動(dòng)獲取當(dāng)前時(shí)間的操作方法

    Vue3新增時(shí)自動(dòng)獲取當(dāng)前時(shí)間的操作方法

    這篇文章主要介紹了Vue3新增時(shí)自動(dòng)獲取當(dāng)前時(shí)間的操作方法,本文通過(guò)實(shí)例代碼圖文相結(jié)合給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
    2024-07-07
  • Vuejs 用$emit與$on來(lái)進(jìn)行兄弟組件之間的數(shù)據(jù)傳輸通信

    Vuejs 用$emit與$on來(lái)進(jìn)行兄弟組件之間的數(shù)據(jù)傳輸通信

    本篇文章主要介紹了Vuejs 用$emit 與 $on 來(lái)進(jìn)行兄弟組件之間的數(shù)據(jù)傳輸示例,非常具有實(shí)用價(jià)值,需要的朋友可以參考下。
    2017-02-02
  • Vue3中動(dòng)態(tài)修改樣式與級(jí)聯(lián)樣式優(yōu)先順序圖文詳解

    Vue3中動(dòng)態(tài)修改樣式與級(jí)聯(lián)樣式優(yōu)先順序圖文詳解

    在項(xiàng)目中,我們時(shí)常會(huì)遇到動(dòng)態(tài)的去綁定操作切換不同的CSS樣式,下面這篇文章主要給大家介紹了關(guān)于Vue3中動(dòng)態(tài)修改樣式與級(jí)聯(lián)樣式優(yōu)先順序的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-04-04
  • JointJS流程圖的繪制方法

    JointJS流程圖的繪制方法

    這篇文章主要為大家介紹了JointJS流程圖的繪制方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2018-12-12
  • 關(guān)于Vue Webpack2單元測(cè)試示例詳解

    關(guān)于Vue Webpack2單元測(cè)試示例詳解

    這篇文章主要給大家介紹了關(guān)于Vue Webpack2單元測(cè)試的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面跟著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。
    2017-08-08
  • vue中使用[provide/inject]實(shí)現(xiàn)頁(yè)面reload的方法

    vue中使用[provide/inject]實(shí)現(xiàn)頁(yè)面reload的方法

    這篇文章主要介紹了在vue中使用[provide/inject]實(shí)現(xiàn)頁(yè)面reload的方法,文中給大家提到了在vue中實(shí)現(xiàn)頁(yè)面刷新不同的方法,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-09-09
  • vue如何通過(guò)props方式在子組件中獲取相應(yīng)的對(duì)象

    vue如何通過(guò)props方式在子組件中獲取相應(yīng)的對(duì)象

    這篇文章主要介紹了vue如何通過(guò)props方式在子組件中獲取相應(yīng)的對(duì)象,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • Vue3實(shí)現(xiàn)一個(gè)可左右滑動(dòng)操作組件的示例代碼

    Vue3實(shí)現(xiàn)一個(gè)可左右滑動(dòng)操作組件的示例代碼

    這篇文章主要為大家詳細(xì)介紹了如何利用Vue3實(shí)現(xiàn)一個(gè)可左右滑動(dòng)操作組件,文中的示例代碼講解詳細(xì),對(duì)我們學(xué)習(xí)Vue有一定幫助,感興趣的可以學(xué)一下
    2022-11-11
  • Vue按鈕權(quán)限的實(shí)現(xiàn)示例

    Vue按鈕權(quán)限的實(shí)現(xiàn)示例

    在編寫(xiě)Vue代碼的時(shí)候,經(jīng)常會(huì)碰到各種權(quán)限問(wèn)題,本文主要介紹了Vue按鈕權(quán)限的實(shí)現(xiàn)示例,具有一定的參考價(jià)值,感興趣的可以了解一下
    2024-08-08

最新評(píng)論