vue项目60秒内禁止按钮再次被点击

最新推荐文章于 2023-01-06 10:21:47 发布

Donmind29

最新推荐文章于 2023-01-06 10:21:47 发布

阅读量1.4k

点赞数 5

文章标签： vue.js

本文链接：https://blog.csdn.net/YL971129/article/details/113803625

版权

本文介绍了如何在前端应用中通过禁用按钮和定时器防止用户在60秒内多次触发获取验证码的功能。代码示例展示了如何在Vue.js中使用正则表达式验证手机号，然后启用按钮并开始倒计时，倒计时结束后恢复按钮功能。

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

用于获取验证码时防止用户多次触发

按钮：

<el-button style="padding:8px" size="mini" :disabled ="canGet" @click="getCode">{{btnText}}</el-button>

data中相关的数据

data(){
	return {
			canGet:false,    //获取验证码按钮是否禁用
            time:0,
            btnText: "获取验证码",
            timer:null,
	}
}

逻辑

getCode(){   //获取验证码
            let phoneReg = /^[1][3,5,7,8][0-9]{9}$/;
            if(!phoneReg.test(this.userForm.mobile)){    //发请求时先正则检验下手机号
                this.$message({
                    showClose: true,
                    message: "请检查手机号后重试",
                    type: "warning"
                })
                return;
            }
            this.canGet = true;  //禁用按钮，防止多次触发
            this.time = 60;  //60秒后能继续按按钮
            this.timer1();
            
        },

timer1(){   //验证码60s内不能继续点击的函数
            if(this.time > 0) {
                this.time--;
                this.btnText = this.time + "s后重新获取"
                this.timer = setTimeout(this.timer1,1000)
            }else{
                this.time = 0;
                this.btnText = "获取验证码";
                this.canGet = false;
                clearTimeout(this.timer);
            }
        },