Vue 实现获取验证码倒计时功能

最新推荐文章于 2024-06-25 12:02:02 发布

语不惊人死不茠

最新推荐文章于 2024-06-25 12:02:02 发布

阅读量1.5k

点赞数 1

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_36518259/article/details/86510969

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文通过实例代码介绍了Vue中实现获取验证码并显示倒计时功能的方法，包括显示代码和逻辑代码部分，以及相关验证样式的CSS。

摘要由CSDN通过智能技术生成

需要引入的文件其中有些是我需要调用接口时用的。不是此demo所需

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">
  <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
  <script src="https://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

上图为实现效果

下面为实现代码

显示代码

<div id="app" v-cloak>
<div class="container" >
  <div class="mylogin">
    <h3 class="text-center">找回密码</h3>
    <div class="form-group">
      <div class="input-group">
        <div class="input-group-addon">
          <span class="glyphicon glyphicon-user"> 手机号</span>
        </div>
        <input type="text" v-model="tel" placeholder="请输入您的手机号码" class="form-control" >
      </div>
      <em v-if="flag" class="glyphicon glyphicon-info-sign error-con"> </em>
      <span class="error-con"  v-if="flag"> {{errorMsg}}</span>
    </div>
    <div class="form-group">
      <div class="input-group">
        <div class="input-group-addon">
          <span class="glyphicon glyphicon-lock"> 验证码</span>
        </div>
        <span>
          <input type="text" v-model="yzm" placeholder="请输入验证码" class="form-control" style="width: 50%;border-radius: 0px">
          &nbsp;  &nbsp;  &nbsp;  &nbsp;
         <button class="btn" @click="countDown()" style="width:40%">{{content}}</button>
        </span>
      </div>
      <em v-if="yzmflag" class="glyphicon glyphicon-info-sign error-con"> </em>
      <span class="error-con"  v-if="yzmflag"> {{errorYzm}}</span>
    </div>
    <input type="submit" class="btn btn-primary form-control">
</div>
</div>
</div>

逻辑代码

<script>
  var app = new Vue({
    el: '#app',
    data: {
      flag:false,//手机号码boolean
      yzmflag:false,//验证码boolean
      errorMsg:'',//错误信息
      errorYzm:'验证码有误，请重新输入',
      tel:'',//手机号
      yzm:'',//验证码
      content: '发送验证码', // 按钮里显示的内容
      totalTime: 5 ,     //记录具体倒计时时间
      timer: 'cloak',  // 定时器名称
      canClick: true //添加canClick  判断按钮能否点击
    },
    methods:{
      countDown:function() {
        var that=this;
        var reg = /^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/;
        if(that.tel==''){
          that.flag=true;
          that.errorMsg='手机号码不能为空';
          return false;
        }else if((!reg.test(that.tel))){
          that.errorMsg='手机号码格式不正确';
          that.flag=true;
          return false;
        }
          else {
          that.flag=false;
            if (!this.canClick) return  //改动的是这两行代码,限制点击
            this.canClick = false
            that.content = that.totalTime + 's后重新发送' //这里解决60秒不见了的问题
            that.cloak = setInterval(function () {
              that.totalTime--
              if (that.totalTime > 0) {
                that.content = that.totalTime + 's后重新发送'
              }
              if (that.totalTime <= 0) {     //当倒计时小于等于0时清除定时器
                window.clearInterval(that.cloak)
                that.content = '重新发送验证码';
                that.totalTime = 5;
                that.canClick = true  //这里重新开启
              }
            }, 1000)
          }
        }
    },
    mounted:function () {
      var that = this;
    }
  })
</script>

某些验证样式css

<style>
    .container {
      margin-top: 120px;
      padding-bottom: 20px;
    }
    .mylogin {
      width: 450px;
      padding: 20px;
      padding-top: 5px;
      margin: 0 auto;
      border: 1px solid #eee;

    }
    h3 {
      margin-bottom: 20px;
    }
    .error-con{
      line-height: 24px;
      font-size: 14px;
      color: #f56700;
    }
    /*.container form {
      border: 1px solid red;
    }*/
  </style>