点击发送验证码按钮的时候 会调用ajax请求发送验证码
但是 如果没有设置倒计时 如果一直重复点击按钮的话 会一直请求发送验证码 所以我们要设置一个验证码倒计时
<input id="sendCodeId" type="button" class="btn btn-danger" @click="sendCode" value="发送验证码"/>这个是前端代码 当点击 发送验证码 触发点击事件 sendcode
sendCode:function(){var _this =this;var url = "user/UserRewardRecord_code.do";$.ajax({type: "POST",url: baseURL + url,data: vm.reward,success: function (r) {if (r.success) {$.jGrowl("发送成功,请输入验证码");vm.reward.businessId = r.data;} else {$.jGrowl("操作失败:"+r.data);}}});点击按钮直接调用后台接口发送验证码 所以我们要设置验证码过期时间
在vue的data里面设置
InterValObj:null,//timer变量，控制时间count : 60, //间隔函数，1秒执行curCount:null,//当前剩余秒数然后再sendcode 这个函数里面
sendCode:function(){curCount = this.count;document.getElementById("sendCodeId").setAttribute('disabled',"true");document.getElementById("sendCodeId").value=curCount+"秒后重获";this.InterValObj = window.setInterval( this.SetRemainTime, 1000); // 启动计时器timer处理函数，1秒执行一次var _this =this;var url = "user/UserRewardRecord_code.do";$.ajax({type: "POST",url: baseURL + url,data: vm.reward,success: function (r) {if (r.success) {$.jGrowl("发送成功,请输入验证码");vm.reward.businessId = r.data;} else {$.jGrowl("操作失败:"+r.data);}}});},通过id设置disabled 让这个按钮不可以再去点击 设置其内容值
document.getElementById("sendCodeId").value=curCount+"秒后重获";
然后启用定时器
SetRemainTime:function (){if (curCount == 0) {//超时重新获取验证码window.clearInterval(this.InterValObj);// 停止计时器document.getElementById("sendCodeId").removeAttribute("disabled");//移除禁用状态改为可用document.getElementById("sendCodeId").value="重获验证码";}else {curCount--;document.getElementById("sendCodeId").value=curCount+"秒后重获";}},通过调这个函数 就可以达到验证码倒计时了
当60秒过后 disabled属性 remove
后端代码
就是 设置一个验证按过期时间
新增字段 来判断
