小編給大家分享一下vue如何實現(xiàn)通過手機發(fā)送短信驗證碼注冊功能，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

成都創(chuàng)新互聯(lián)，專注為中小企業(yè)提供官網(wǎng)建設(shè)、營銷型網(wǎng)站制作、響應(yīng)式網(wǎng)站設(shè)計、展示型網(wǎng)站設(shè)計、成都網(wǎng)站制作等服務(wù)，幫助中小企業(yè)通過網(wǎng)站體現(xiàn)價值、有效益。幫助企業(yè)快速建站、解決網(wǎng)站建設(shè)與網(wǎng)站營銷推廣問題。

效果如下：

代碼如下：

template代碼：

<el-main>
  <el-form 
   :model="ReginForm"
   ref="ReginForm"
   :rules="rule"
   class="regform"
   label-width="0">
   <h4 class="login-text">手機注冊</h4>
    <el-form-item prop="tel">
    <el-input 
     type="text"
     v-model.number="ReginForm.tel"
     placeholder="手機號碼">
    </el-input>
   </el-form-item>
    <el-form-item prop="password">
    <el-input 
     type="password"
     v-model="ReginForm.password"
     placeholder="密碼">
    </el-input>
   </el-form-item>
        <div>
       <input class="auth_input" type="text" v-model="verification"  placeholder="輸入驗證碼" />
  <span v-show="sendAuthCode" class="auth_text auth_text_blue" @click="getAuthCode">獲取驗證碼</span>
  <span v-show="!sendAuthCode" class="auth_text"> <span class="auth_text_blue">{{auth_time}} </span> 秒之后重新發(fā)送驗證碼</span> 
  </div>
   <el-form-item >
    <el-button 
     type="success" 
     class="submitBtn"
     round
     @click.native.prevent="submit"
     :loading="logining">
     注冊
    </el-button>
    <hr>
    <p>已經(jīng)有賬號，馬上去<span class="to" @click="tologin">登錄</span></p>
   </el-form-item>
  </el-form>
 </el-main>
</template>

script 代碼如下

export default {
 data () {
  let confirmpasswordCheck = (rule, value, callback) => {
   if (value === '') {
    return callback(new Error('密碼是必須的'))
   } else {
    return callback()
   }
  }
  let telCheck = (rule, value, callback) => {
   if (value === '') {
    return callback(new Error('電話號碼是必須的'))
   } else if (!Number.isInteger(value)) {
    return callback(new Error('電話號碼必須是數(shù)字'))
   } else if (value.toString().length !== 11) {
    return callback(new Error('電話號碼必須是11位數(shù)字'))
   } else {
    callback()
   }
  }
  return {
   ReginForm: {
    password: '',
    tel: '',
   },
   logining: false,
    sendAuthCode:true,/*布爾值，通過v-show控制顯示‘獲取按鈕'還是‘倒計時' */
      auth_time: 0, /*倒計時 計數(shù)器*/
      verification:"",//綁定輸入驗證碼框框
   rule: {
    password: [
     {
      required: true,
      message: '密碼是必須的！',
      trigger: 'blur'
     }
    ],
    tel: [
     {
      required: true,
      validator: telCheck,
      trigger: 'blur'
     }
    ],
   }
  }
 },
 methods: {
   //  驗證
     getAuthCode:function () {
      const verification =this.ReginForm.tel;
       const url = " "
       console.log("url",url);
        this.$http.get(url).then(function (response) {
         console.log("請求成功",response)
         }, function (error) {
         console.log("請求失敗",error);
        })
      this.sendAuthCode = false;
     //設(shè)置倒計時秒
      this.auth_time = 10;
      var auth_timetimer = setInterval(()=>{
        this.auth_time--;
        if(this.auth_time<=0){
          this.sendAuthCode = true;
          clearInterval(auth_timetimer);
        }
      }, 1000);
    },
  // 封裝注冊發(fā)送請求方法
   thisAjax(){
   const passwordData=this.ReginForm.password;
   const phoneData =this.ReginForm.tel;
   const mCodeData=this.verification;
  //  手機注冊
//emulateJSON:true設(shè)置后post可跨域
  const url = " 填接口"
      this.$http.post(url,{填傳入的參數(shù)},{emulateJSON:true}).then(function (response) 
 {
     //登錄后跳轉(zhuǎn)的頁面
        this.$router.push('/');
      }, function (error) {
        alert("請求失敗",error);
      })
  },
  // ...
  submit () {
   this.$refs.ReginForm.validate(valid => {
    if (valid) {
     this.logining = true
      this. thisAjax();
     console.log('開始寫入后臺數(shù)據(jù)！')
    } else {
     console.log('submit err')
    }
   })
  },
  reset () {
   this.$refs.ReginForm.resetFields()
  },
  tologin () {
//已經(jīng)注冊過跳轉(zhuǎn)到登入界面
   this.$router.push('/phoneLogin')
  }
 }
}
</script>

style代碼如下：

.regform {
 margin: 20px auto;
 width: 310px;
 background: #fff;
 box-shadow: 0 0 10px #B4BCCC;
 padding: 30px 30px 0 30px;
 border-radius: 25px; 
}
.submitBtn {
 width: 65%;
}
.to {
 color: #FA5555;
 cursor: pointer;
}
.auth_input{
  width:140px;
  height:38px;
  margin-bottom:20px;
  border:1px solid #DCDFE6;
  /* color:red; */
  padding-left:10px;
  border-radius: 8%;
}
.regform[data-v-92def6b0]{
  width:370px;
  min-height: 440px;
}
.login-text{
 text-align: center;
 margin-bottom:20px;
}
</style>

vue是什么

Vue是一套用于構(gòu)建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫只關(guān)注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。

看完了這篇文章，相信你對“vue如何實現(xiàn)通過手機發(fā)送短信驗證碼注冊功能”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

文章標題：vue如何實現(xiàn)通過手機發(fā)送短信驗證碼注冊功能
網(wǎng)站鏈接：http://aaarwkj.com/article46/igdihg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計公司、軟件開發(fā)、網(wǎng)站營銷、虛擬主機、網(wǎng)站維護、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)