vue实现验证码倒计时功能

最新推荐文章于 2024-09-14 10:51:24 发布

乐容

最新推荐文章于 2024-09-14 10:51:24 发布

阅读量571

点赞数 4

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_61265297/article/details/135741831

版权

本文介绍了在开发中实现验证码倒计时功能的重要性，以限制用户频繁请求短信验证码，保护服务器性能，节省费用并增强安全性。通过JavaScript定时器控制发送频率，展示了相关代码实现和CSS样式设计。

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

开发验证码倒计时功能的必要性
主要是为了防止用户频繁的点击，获取短信验证码是有时间限制的，这样就可以让用户在规定的时间内只能点击一次，在客户端就只是告知用户这个什么时候可以点击，在服务端就可以更少的调用这个接口，不去影响服务器的性能
每点击一次都会发送一条短信，也是会收费用的，限制用户点击次数也可以节省费用
设置短信验证码可以定位到目标用户，提高安全性

 <el-button v-bind:class="{grey:isGrey,blue:!isGrey}" 
            v-bind:disabled="dis" type="primary" 
            @click="getCode">
      <span v-if="show">发送验证码</span>
      <span v-else>重新发送({{count}}s)</span>
  </el-button>

js代码

<script>
export default {
  data() {
    return {
      dis: false,
      show: true,
      isGrey: false, //按钮样式
      timer: null, //设置计时器,
      count: ""
    };
  },
  methods: {
    getCode() {
      let TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.isGrey = true;
        this.show = false;
        this.dis = true;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) { 
            this.count--;
          } else {
            this.dis = false;
            this.isGrey = false;
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    }
  }
};
</script>

css代码

 .grey{
    background-color: #EDEEF1;
    border-color: #EDEEF1;
    color:#666;
    width: 30%;
  }
  .blue{
    background-color: #64A0DD;
    border-color: #64A0DD;
  }