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

vue 實(shí)現(xiàn)通過(guò)手機(jī)發(fā)送短信驗(yàn)證碼注冊(cè)功能

 更新時(shí)間:2018年04月19日 10:29:42   作者:簡(jiǎn)簡(jiǎn)單單的我  
這篇文章主要介紹了vue 實(shí)現(xiàn)通過(guò)手機(jī)發(fā)送短信驗(yàn)證碼注冊(cè)功能的相關(guān)資料,需要的朋友可以參考下

效果如下:

代碼如下:

template代碼:

<el-main>
  <el-form 
   :model="ReginForm"
   ref="ReginForm"
   :rules="rule"
   class="regform"
   label-width="0">
   <h3 class="login-text">手機(jī)注冊(cè)</h3>
    <el-form-item prop="tel">
    <el-input 
     type="text"
     v-model.number="ReginForm.tel"
     placeholder="手機(jī)號(hào)碼">
    </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="輸入驗(yàn)證碼" />
  <span v-show="sendAuthCode" class="auth_text auth_text_blue" @click="getAuthCode">獲取驗(yàn)證碼</span>
  <span v-show="!sendAuthCode" class="auth_text"> <span class="auth_text_blue">{{auth_time}} </span> 秒之后重新發(fā)送驗(yàn)證碼</span> 
  </div>
   <el-form-item >
    <el-button 
     type="success" 
     class="submitBtn"
     round
     @click.native.prevent="submit"
     :loading="logining">
     注冊(cè)
    </el-button>
    <hr>
    <p>已經(jīng)有賬號(hào),馬上去<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('電話號(hào)碼是必須的'))
   } else if (!Number.isInteger(value)) {
    return callback(new Error('電話號(hào)碼必須是數(shù)字'))
   } else if (value.toString().length !== 11) {
    return callback(new Error('電話號(hào)碼必須是11位數(shù)字'))
   } else {
    callback()
   }
  }
  return {
   ReginForm: {
    password: '',
    tel: '',
   },
   logining: false,
    sendAuthCode:true,/*布爾值,通過(guò)v-show控制顯示‘獲取按鈕'還是‘倒計(jì)時(shí)' */
      auth_time: 0, /*倒計(jì)時(shí) 計(jì)數(shù)器*/
      verification:"",//綁定輸入驗(yàn)證碼框框
   rule: {
    password: [
     {
      required: true,
      message: '密碼是必須的!',
      trigger: 'blur'
     }
    ],
    tel: [
     {
      required: true,
      validator: telCheck,
      trigger: 'blur'
     }
    ],
   }
  }
 },
 methods: {
   //  驗(yàn)證
     getAuthCode:function () {
      const verification =this.ReginForm.tel;
       const url = " "
       console.log("url",url);
        this.$http.get(url).then(function (response) {
         console.log("請(qǐng)求成功",response)
         }, function (error) {
         console.log("請(qǐng)求失敗",error);
        })
      this.sendAuthCode = false;
     //設(shè)置倒計(jì)時(shí)秒
      this.auth_time = 10;
      var auth_timetimer = setInterval(()=>{
        this.auth_time--;
        if(this.auth_time<=0){
          this.sendAuthCode = true;
          clearInterval(auth_timetimer);
        }
      }, 1000);
    },
  // 封裝注冊(cè)發(fā)送請(qǐng)求方法
   thisAjax(){
   const passwordData=this.ReginForm.password;
   const phoneData =this.ReginForm.tel;
   const mCodeData=this.verification;
  //  手機(jī)注冊(cè)
//emulateJSON:true設(shè)置后post可跨域
  const url = " 填接口"
      this.$http.post(url,{填傳入的參數(shù)},{emulateJSON:true}).then(function (response) 
 {
     //登錄后跳轉(zhuǎn)的頁(yè)面
        this.$router.push('/');
      }, function (error) {
        alert("請(qǐng)求失敗",error);
      })
  },
  // ...
  submit () {
   this.$refs.ReginForm.validate(valid => {
    if (valid) {
     this.logining = true
      this. thisAjax();
     console.log('開(kāi)始寫(xiě)入后臺(tái)數(shù)據(jù)!')
    } else {
     console.log('submit err')
    }
   })
  },
  reset () {
   this.$refs.ReginForm.resetFields()
  },
  tologin () {
//已經(jīng)注冊(cè)過(guò)跳轉(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>

總結(jié)

以上所述是小編給大家介紹的vue 實(shí)現(xiàn)通過(guò)手機(jī)發(fā)送驗(yàn)證碼注冊(cè)功能,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!

相關(guān)文章

  • vue點(diǎn)擊自增和求和的實(shí)例代碼

    vue點(diǎn)擊自增和求和的實(shí)例代碼

    今天小編就為大家分享一篇vue點(diǎn)擊自增和求和的實(shí)例代碼,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2019-11-11
  • Vue中動(dòng)態(tài)Class實(shí)戰(zhàn)示例

    Vue中動(dòng)態(tài)Class實(shí)戰(zhàn)示例

    這篇文章主要為大家介紹了Vue中動(dòng)態(tài)Class的實(shí)戰(zhàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-11-11
  • 關(guān)于vue 的slot分發(fā)內(nèi)容 (多個(gè)分發(fā))

    關(guān)于vue 的slot分發(fā)內(nèi)容 (多個(gè)分發(fā))

    這篇文章主要介紹了關(guān)于vue 的slot分發(fā)內(nèi)容 (多個(gè)分發(fā)),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-03-03
  • Vue CLI項(xiàng)目 axios模塊前后端交互的使用(類似ajax提交)

    Vue CLI項(xiàng)目 axios模塊前后端交互的使用(類似ajax提交)

    這篇文章主要介紹了Vue-CLI項(xiàng)目-axios模塊前后端交互的使用詳解(類似ajax提交),本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-09-09
  • 學(xué)習(xí)vue.js表單控件綁定操作

    學(xué)習(xí)vue.js表單控件綁定操作

    這篇文章主要和大家一起學(xué)習(xí)vue.js表單控件綁定操作,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-12-12
  • 詳解vue-validator(vue驗(yàn)證器)

    詳解vue-validator(vue驗(yàn)證器)

    本篇文章主要介紹了vue-validator(vue驗(yàn)證器),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-01-01
  • vue中實(shí)現(xiàn)打印功能的幾種方法示例

    vue中實(shí)現(xiàn)打印功能的幾種方法示例

    這篇文章主要給大家介紹了關(guān)于vue中實(shí)現(xiàn)打印功能的幾種方法,打印功能在實(shí)際開(kāi)發(fā)中非常常見(jiàn),通常我們需要將網(wǎng)頁(yè)中的某一部分或整個(gè)網(wǎng)頁(yè)打印出來(lái),需要的朋友可以參考下
    2023-09-09
  • vue3 添加編輯頁(yè)使用 cron 表達(dá)式生成方法小結(jié)

    vue3 添加編輯頁(yè)使用 cron 表達(dá)式生成方法小結(jié)

    這篇文章主要介紹了vue3 添加編輯頁(yè)使用 cron 表達(dá)式生成方法小結(jié),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-12-12
  • 快速解決vue2+vue-cli3項(xiàng)目ie兼容的問(wèn)題

    快速解決vue2+vue-cli3項(xiàng)目ie兼容的問(wèn)題

    這篇文章主要介紹了快速解決vue2+vue-cli3項(xiàng)目ie兼容的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-11-11
  • axios攜帶cookie配置詳解(axios+koa)

    axios攜帶cookie配置詳解(axios+koa)

    這篇文章主要介紹了axios攜帶cookie配置詳解(axios+koa),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-12-12

最新評(píng)論