vue中手機號,郵箱正則驗證以及60s發送驗證碼


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

  1.  
    <div>
  2.  
    <p class="fl">
  3.  
    <input name="phone" type="number" placeholder="手機號" v-model="phone"/>
  4.  
    <button type="button" :disabled="disabled" @click="sendcode" class="btns">{{btntxt}}</button>
  5.  
    </p>
  6.  
    <p class="fl" style="margin-left: 20px;">
  7.  
    <input type="text" placeholder="驗證碼"/>
  8.  
    </p>
  9.  
    </div>
  10.  
    <input type="button" value="查詢" class="btns search" @click="query"/>

這里是script里的內容

  1.  
    export default {
  2.  
    data: function () {
  3.  
    return {
  4.  
    disabled: false,
  5.  
    time: 0,
  6.  
    btntxt: "獲取驗證碼",
  7.  
    formMess:{
  8.  
    email: this.email,
  9.  
    phone: this.phone
  10.  
    }
  11.  
    }
  12.  
    },
  13.  
    mounted: function () {
  14.  
     
  15.  
    },
  16.  
    methods:{
  17.  
    //驗證手機號碼部分
  18.  
    sendcode(){
  19.  
    var reg=11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
  20.  
    //var url="/nptOfficialWebsite/apply/sendSms?mobile="+this.ruleForm.phone;
  21.  
    if(this.phone==''){
  22.  
    alert( "請輸入手機號碼");
  23.  
    } else if(!reg.test(this.phone)){
  24.  
    alert( "手機格式不正確");
  25.  
    } else{
  26.  
    this.time=60;
  27.  
    this.disabled=true;
  28.  
    this.timer();
  29.  
    /*axios.post(url).then(
  30.  
    res=>{
  31.  
    this.phonedata=res.data;
  32.  
    })*/
  33.  
    }
  34.  
    },
  35.  
    timer() {
  36.  
    if (this.time > 0) {
  37.  
    this.time--;
  38.  
    this.btntxt=this.time+"s后重新獲取";
  39.  
    setTimeout( this.timer, 1000);
  40.  
    } else{
  41.  
    this.time=0;
  42.  
    this.btntxt="獲取驗證碼";
  43.  
    this.disabled=false;
  44.  
    }
  45.  
    },
  46.  
    query(){
  47.  
    var formMess=this.formMess
  48.  
    Axios.post(api+ "/order/select/reception", formMess)
  49.  
    .then(function (res) {
  50.  
    if(res.data.code==200){
  51.  
    console.log(res. data.data);
  52.  
    this.productResult=res.data.data;
  53.  
    this.productResult.length=3;
  54.  
    } else if(res.data.code==400){
  55.  
    alert(res. data.message)
  56.  
    }
  57.  
     
  58.  
    }.bind( this))
  59.  
    },
  60.  
    //郵箱驗證
  61.  
    sendEmail(){
  62.  
    var regEmail= /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
  63.  
    if(this.email==''){
  64.  
    alert( "請輸入郵箱");
  65.  
    } else if(!regEmail.test(this.email)){
  66.  
    alert( "郵箱格式不正確");
  67.  
    }
  68.  
    }
  69.  
    }
  70.  
    }
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM