快捷導(dǎo)航

vue實(shí)現(xiàn)登陸頁面開發(fā)實(shí)踐

更新時(shí)間：2022年05月30日 16:03:08 作者：super美少女戰(zhàn)士

本文主要介紹了vue實(shí)現(xiàn)登陸頁面開發(fā)實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

一、輸入框input的校驗(yàn)：1、blur時(shí)沒有值和格式不符合的邏輯校驗(yàn)
2、限制輸入長度邏輯，比如手機(jī)號(hào)只能11位，驗(yàn)證碼只能6位。
二、驗(yàn)證碼按鈕邏輯：
1、不同狀態(tài)下驗(yàn)證碼顏色，文案，是否能點(diǎn)擊，是否顯示記數(shù)需要兼顧。
2、驗(yàn)證碼能夠正常點(diǎn)擊是在手機(jī)號(hào)格式正確情況下，所以這里要有個(gè)監(jiān)聽手機(jī)號(hào)，一旦格式符合，驗(yàn)證碼生效
3、關(guān)于計(jì)數(shù)器的邏輯。

以下會(huì)從上面的點(diǎn)開考慮：

一、input的校驗(yàn)沒有可說的，記住倆點(diǎn)，一個(gè)控制輸入長度，一個(gè)控制格式。

1、格式校驗(yàn)

handleblurtel(){
      let phoneCodeVerification = /^[1][3,4,5,7,8][0-9]{9}$/;
     if(this.form.tel===''){
       this.errorTxt="請輸入手機(jī)號(hào)碼" // 不同情況下錯(cuò)誤提示
     }else if(!phoneCodeVerification.test(this.form.tel)){
       this.errorTxt="請輸入正確的手機(jī)號(hào)碼格式"
     }else{
       this.errorTxt='' //有效情況記得清空錯(cuò)誤提示
       return true
     }
   },
 // 驗(yàn)證碼必填和格式驗(yàn)證
   handleblurcode(){
     if(this.form.code===''){
       this.errorTxtcode="請輸入驗(yàn)證碼"
     }else if(this.form.code.length>0&&this.form.code.length<6){
       this.errorTxtcode="請輸入正確的驗(yàn)證碼格式"
     }else{
       this.errorTxt=''
       return true
     }
   }

2、長度控制

 // 限制輸入的字符串長度
    hanldeInputTel(){//手機(jī)號(hào)長度保證11位
      if(this.form.tel.length>11){
        this.form.tel=this.form.tel.slice(0,11)
      }
    },
    handleInputCode(){//驗(yàn)證碼保證6位
      if(this.form.code.length>6){
        this.form.code=this.form.code.slice(0,6)
      }
    },

二、驗(yàn)證碼邏輯：

貼下html代碼：

 <van-field
    v-model="form.code" 
    center
    clearable
    label="短信驗(yàn)證碼"
    :error-message="errorTxtcode"
    placeholder="請輸入短信驗(yàn)證碼"
    @input="handleInputCode"
    @blur="handleblurcode"
    
  >
    <template #button>
      <button size="small" :disabled="btnStatus" :class="btnStyle" type="primary" @click="clickCode">
        <van-count-down :time="time" format="ss" v-if="countFlag===1" @finish="finishDown"></van-count-down>
        <span>{{countTxt}}</span>
      </button>
    </template>
  </van-field>

vant-count-down是vant組件自帶的計(jì)數(shù)器用法，直接引入，time是初始化時(shí)間數(shù)，比如60s，1min，format是時(shí)間格式：時(shí)分秒，秒等。
@finish是自帶的方法，具體api可去官方網(wǎng)站看，這里不做介紹。

1、初始化按鈕狀態(tài)：

data(){
    return {
      form:{
        tel:'',
        code:''
      },
      errorTxt:'',// 手機(jī)號(hào)錯(cuò)誤提示
      errorTxtcode:'',// 驗(yàn)證碼錯(cuò)誤提示
      btnStatus:true,// 按鈕不可點(diǎn)擊
       btnStyle: 'nomalStyle',// 促初始化按鈕樣式
       time:60*1000,// 時(shí)間數(shù)
       countTxt:'發(fā)送驗(yàn)證碼',// 初始化按鈕文案
       countFlag:0//0:展示文案，1；展示計(jì)數(shù)，開始計(jì)時(shí)
    }
  
  },

1、開始計(jì)時(shí)：
按鈕狀態(tài)不可點(diǎn)擊狀態(tài)btnStatus，按鈕樣式：btnStyle，開始計(jì)數(shù)：countFlag

// 點(diǎn)擊按鈕開始計(jì)時(shí)
    clickCode(){
      this.btnStatus=true
      this.btnStyle=`countdown`
      this.countFlag=1//開始計(jì)時(shí)
      this.countTxt=''//文案為空
    },

2、倒計(jì)時(shí)結(jié)束后：需要修改這些參數(shù)
按鈕可繼續(xù)點(diǎn)擊btnStatus，顯示文案countFlag，c文案內(nèi)容countTxt

//  倒計(jì)時(shí)結(jié)束
    finishDown(){
       this.btnStyle=`canClick`
       this.btnStatus=false
       this.countTxt='重新獲取'
       this.countFlag=0
    },

3、按鈕狀態(tài)何時(shí)觸發(fā)：
手機(jī)號(hào)符合格式情況下，watch里面監(jiān)聽手機(jī)號(hào)

 watch:{
   form: {
      handler() {
        if(/^[1][3,4,5,7,8][0-9]{9}$/.test(this.form.tel)){
         this.btnStyle = 'canClick'
          this.btnStatus=false
        }else{
         this.btnStatus=true
        }
      },
      immediate: true,
      deep: true
    }
  },

4、最后點(diǎn)擊提交的簡單寫法：

// 提交用戶信息
    sumbit(){
      let telStatus=this.handleblurtel()
      let codeStatus=this.handleblurcode()
      if(telStatus&&codeStatus){
        this.axios.get({}).then(res=>{
          console.log('提交成功')
          // 把后端會(huì)的token存入前端緩存
          localStorage.setItem('token',res.data.toekn)
          // 跳轉(zhuǎn)到首頁
          this.$router.push({path:'/'})
        })
      }
    },

1，2，3步可以一步一步來，這樣思路就會(huì)清晰，不然會(huì)覺得驗(yàn)證碼一會(huì)兒這樣顯示一會(huì)兒那樣顯示，就會(huì)很混亂，所以先把單個(gè)功能開發(fā)完，最后寫按鈕變化前提條件這樣思路就很明確。

樣式放在文末：

.nomalStyle {
    background: #EAEEFD;
    color: #5E6679;
  }
  button {
      width: 161px;
      height: 61px;
      border-radius: 31px;
      line-height: 61px;
      font-size: 24px;
      text-align: center;
    }
    .canClick {
    background-color: #3E64D4;
    color: #FFFFFF;
  }
   .countdown {
    background: #EAEEFD;
    color: #3E64D4
  }

到此這篇關(guān)于vue實(shí)現(xiàn)登陸頁面開發(fā)實(shí)踐的文章就介紹到這了,更多相關(guān)vue 登陸頁面內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: