vue2之簡(jiǎn)易的pc端短信驗(yàn)證碼的問(wèn)題及處理方法

更新時(shí)間：2019年06月03日 08:29:26 作者：前端打工仔

這篇文章主要介紹了vue2之簡(jiǎn)易的pc端短信驗(yàn)證碼的問(wèn)題,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

<提示語(yǔ)部分不要在意（非重點(diǎn)部分）>

簡(jiǎn)單說(shuō)下布局(采用的是 vue的element ui的ui框架 )進(jìn)行布局操作的

子組件模板部分如下（code部分是很基礎(chǔ)的）

<template>
 <div class="forget">
  <el-dialog title="修改新密碼" :visible.sync="dialog.visible"
  :close-on-click-modal="false"
     :close-on-press-escape="false"
  >
   <el-form :model="dialog.ruleForm" status-icon :rules="rules" :ref="dialog.ruleForms"

      label-width="100px" class="demo-ruleForm">
    <el-form-item label="手機(jī)號(hào)碼" prop="phone" required>
     <el-input type="text" v-model.number="dialog.ruleForm.phone" autocomplete="off"
        :clearable="true"
     ></el-input>
    </el-form-item>
    <el-form-item label="手機(jī)驗(yàn)證碼"prop="code" required>
     <div class="send-code">
      <el-input type="text" v-model="dialog.ruleForm.code" autocomplete="off"
         maxlength="6"
         show-word-limit
         :clearable="true"
      ></el-input>
      <el-link

        :style="{color:dialog.ruleForm.phone.toString().length===11?'#222':'#999'}"
        type="info" :underline="false"
        :disabled="getDisabled"
        @click="sendCode({
        phone:dialog.ruleForm.phone,sendCode:dialog.ruleForm.sendCode
        })"
      >{{dialog.ruleForm.sendCode}}</el-link>
     </div>
    </el-form-item>
    <el-form-item label="新密碼" prop="newPwd" required>
     <el-input :clearable="true" type="password" v-model="dialog.ruleForm.newPwd"></el-input>
    </el-form-item>
   </el-form>
   <div slot="footer" class="dialog-footer">
    <el-button @click="cancel">取 消</el-button>
    <el-button type="primary" @click="determine(dialog.ruleForms)"
       :loading="dialog.ruleForm.loading"
    >{{dialog.ruleForm.loadingText}}</el-button>
   </div>
  </el-dialog>
 </div>
</template>

子組件邏輯部分如下（code部分是很基礎(chǔ)的）

在@/utils/validate.js中的使用正則代碼

// 驗(yàn)證手機(jī)號(hào)碼
export const validatPhone = /^(^(([0\+]\d{2,3}-)?(0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$)|(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[8-9])[0-9]{8}$/
//驗(yàn)證密碼
export const validatePassword = /^(?=.*\d)(?=.*[a-zA-Z]).{5,20}$/

<script>
 import {validatPhone,validatePassword} from '@/utils/validate'
 export default {
  props:{
   dialog:{
    type:Object,
    default: {}
   },
  },
  name: "Forget",
  data(){
  // 使用正則進(jìn)行驗(yàn)證手機(jī)號(hào)碼
   const validatePhone = (rule, value, callback) => {
    if (!value) {
     return callback(new Error('請(qǐng)輸入手機(jī)號(hào)碼'));
    }
    else {
     if (!validatPhone.test(value)) {
      callback(new Error('請(qǐng)輸入手機(jī)號(hào)碼'));
      return
     }
     callback();
    }
   };
   // 使用進(jìn)行驗(yàn)證手機(jī)驗(yàn)證碼
   const validateCode = (rule, value, callback) => {
    if (value === '') {
     return callback(new Error('請(qǐng)輸入驗(yàn)證碼'));
    } else {
    //真正環(huán)境請(qǐng)修改成自己的邏輯即可
     if (this.dialog.ruleForm.code !== '123456') {
      callback(new Error('驗(yàn)證碼失誤，請(qǐng)重新輸入'))
      // this.dialog.ruleForm.code = ''
      return
     }
     callback();
    }
   };
   // 使用正則進(jìn)行驗(yàn)證密碼
   const validatenewPwd = (rule, value, callback) => {
    if (value === '') {
     callback(new Error('請(qǐng)輸入密碼'));
     return
    } else if (!validatePassword.test(value)) {
     return callback(new Error('新密碼不合法'));
    } else {
     callback();
    }
   };
   return {
    rules:{ //驗(yàn)證表單元素中的規(guī)則
     phone:[
      { validator: validatePhone, trigger: ['blur','change'] }
     ],
     code:[
      { validator: validateCode, trigger: ['blur','change'] }
     ],
     newPwd:[
      { validator: validatenewPwd, trigger: ['blur','change'] }
     ],
    },
    timer: null//操作定時(shí)器

   }
  },
  computed:{
   //getDisabled() 當(dāng)手機(jī)號(hào)碼的長(zhǎng)度等于11位和點(diǎn)擊驗(yàn)證碼狀態(tài)為false時(shí)，則可以進(jìn)行倒計(jì)時(shí)操作 
   getDisabled(){
    let phone= this.dialog.ruleForm.phone
    const isChick = this.dialog.ruleForm.isChick
    if(phone.toString().length === 11 && isChick ===false){
     return false
    }
    else {
     // this.dialog.ruleForm.disabled = true
     return true
    }

   }
  },
  methods:{
   // 發(fā)送驗(yàn)證碼
   sendCode(opt){
    this.$emit('sendCode',opt)
   },
   // 點(diǎn)擊取消按鈕時(shí)觸發(fā)
   cancel(){
    this.$emit('cancel')
   },
   // 點(diǎn)擊確定按鈕時(shí)觸發(fā)
   determine(resf){

    this.$refs[resf].validate((valid) => {
     if (valid) {
      this.$emit('determine',resf)
     } else {
      console.log('error submit!!');
      return false;
     }
    });

   },
  }
 }
</script>

子組件邏輯部分如下（code部分是很基礎(chǔ)的）

<style scoped lang="scss">
 .forget{
  /deep/ .el-dialog__wrapper{
   .el-dialog{
    max-width: 500px;
    .el-dialog__header{
     text-align: center;
    }
   }
   .demo-ruleForm{
    .el-form-item__content{
     max-width:100%
    }
   }
   .el-dialog__body{
    .el-form-item{
     text-align: center;
    }
   }
  }
  .send-code{
   display: flex;flex: 1;justify-content: space-evenly;
   /deep/ .el-input{
    margin-right: 12px
   }
   /deep/ .el-link{
    white-space: nowrap;
    display: inline-block;
    line-height: 1;
    cursor: pointer;
    background: #fff;
    border: 1px solid #dcdfe6;
    color: #606266;
    -webkit-appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    margin: 0;
    transition: .1s;
    font-weight: 500;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    padding: 12px 10px;
    font-size: 14px;
    border-radius: 4px;
   }
  }
  .dialog-footer{
   display: flex;
   flex: 1;
   justify-content: center;
   /deep/ .el-button{
    flex: 0 0 40%;
   }
  }
 }
</style>

父組件中的模板部分

<template>  <forget :dialog="dialog"@cancel="dialog.visible= false" @determine="determine" @sendCode="sendCode"></forget>
</template>

為什么需要使用set這個(gè)api方法呢

如下截圖

可以學(xué)習(xí)下這個(gè)鏈接的使用set的例子

全局變量globals.js文件

[vue-set]的文檔( cn.vuejs.org/v2/api/#Vue… )

說(shuō)明（*****向響應(yīng)式對(duì)象中添加一個(gè)屬性，并確保這個(gè)新屬性同樣是響應(yīng)式的，且觸發(fā)視圖更新。）

export default {
 //判斷是否點(diǎn)擊了
 isChick(data,key='disabled',count=0){
  data[key] =true
  if(count<=0){
   data[key] =false
  }
 },
 //此處是重點(diǎn) 使用的vue官網(wǎng)給的api方法
 [vue-set](https://cn.vuejs.org/v2/api/#Vue-set)
 sendCode(self,name,k,v){
  self.$set(name,k,v)
 }
}

父組件中的邏輯部分

<script>
 export default {
  data() {
   return {
   // 顯示子組件修改密碼的對(duì)象變量
      dialog: {
     visible: false, //是否顯示 
     ruleForms: 'ruleForms', //點(diǎn)擊按鈕后，需要操作的refs(也就是dom元素)
     ruleForm: { //所需要進(jìn)行在表單中操作的部分
      phone: '',
      newPwd: '',
      code: '',
      sendCode: '發(fā)送驗(yàn)證碼',
      disabled: false,
      isChick:false,
      loading: false,
      loadingText: '確 定'
     },
     
    }, 
    //倒計(jì)時(shí)60秒
     timeCount:60
   }
   
  },
  methods:{
   //重點(diǎn)部分
   sendCode60s(self,opt){
    let count=self.timeCount;
    const ruleForm = self[opt.dialog][opt.ruleForm]
    self.timer = setInterval(()=>{
     //這個(gè)按鈕是
     self.$globals.isChick(ruleForm,'disabled',count)
     let code = count<10?`0${count}s后重新發(fā)送`: `${count}s后重新發(fā)送`
     self.$globals.sendCode(self,ruleForm,opt.sendCode,code)
     self.$globals.isChick(ruleForm,'isChick',count)
     if(count<=0){
      ruleForm.disabled = false
      self.$globals.isChick(ruleForm,'disabled')
      code = '發(fā)送驗(yàn)證碼'
      clearInterval(self.timer)
      count =self.timeCount
      self.$globals.sendCode(self,ruleForm,opt.sendCode,code)
      self.$globals.isChick(ruleForm,'isChick')
     }
     count --
    },1000)

   },
   //發(fā)送驗(yàn)證碼sendCode
   sendCode(opt){
    const phone = opt.phone
    //判斷手機(jī)號(hào)碼第1位是否是數(shù)字1開(kāi)頭
    if(phone.slice(0,1)!=='1'){
     this.$message({
      showClose: true,
      message: '請(qǐng)輸入正確的手機(jī)號(hào)碼',
      type: 'error'
     });
     return
    }
    this.$confirm(`向${phone}發(fā)送短信驗(yàn)證碼?`, '提示', {
     confirmButtonText: '確定',
     cancelButtonText: '取消',
     type: 'warning'
    }).then(() => {
     this.$message({
      type: 'success',
      message: '發(fā)送短信驗(yàn)證碼成功!'
     });
     const opt ={
      dialog: 'dialog',
      ruleForm: 'ruleForm',
      sendCode:'sendCode'
     }
     this.sendCode60s(this,opt)
    }).catch(() => {
     this.$message({
      type: 'info',
      message: '發(fā)送短信驗(yàn)證碼失敗'
     });
    });
   },
   //新的密碼
   determine(formName){
    console.log(formName)
    // this.$refs[formName].validate((valid) => {
    //  if (valid) {
    //   this.dialog.ruleForm.loading = true
    //   this.dialog.ruleForm.loadingText ='發(fā)送中...'
    //  } else {
    //   return false;
    //  }
    // });
   },
   
  }
 }
</script>

總結(jié)

以上所述是小編給大家介紹的vue2之簡(jiǎn)易的pc端短信驗(yàn)證碼的問(wèn)題及處理方法,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: