Jquery获取手机验证码后60秒内禁止重新获取简单例子

最新推荐文章于 2022-01-19 21:18:46 发布

迷人的智慧

最新推荐文章于 2022-01-19 21:18:46 发布

阅读量646

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_32217519/article/details/73480735

本文介绍了一种使用JavaScript和jQuery实现的手机验证码倒计时功能。该功能包括输入手机号码验证、发送验证码按钮禁用及倒计时显示等。通过AJAX请求后台发送验证码，并利用cookie记录剩余时间。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步：准备按钮

<input type="button" id="getVerifyCode" value="获取验证码" /><em>如未收到，请重新获取。</em>

第二步：准备必要的样式css

<style type="text/css">
    	#getVerifyCode{cursor: pointer; outline: none;}
    </style>

第三步：请求验证码并处理按钮

$("#getVerifyCode").click(function(){
	    		var phone = $("#txtLoginName").val();
	    		if(phone.length == 0){
	    			alert("请填入手机号码");
	    			return false;
	    		}
	    		if(!(/^1[34578]\d{9}$/.test(phone))){ 
	                alert("手机号码有误，请重填");  
	                return false; 
	            }
	             var btn = $(this);
	             var count = 60;
	             var resend = setInterval(function(){
	                 count--;
	                 if (count > 0){
	                     btn.val(count+"秒后可重新获取");
	                     $.cookie("captcha", count, {path: '/', expires: (1/86400)*count});
	                 }else {
	                     clearInterval(resend);
	                     btn.val("获取验证码").removeAttr('disabled style');
	                 }
	             }, 1000);
	             btn.attr('disabled',true).css('cursor','not-allowed');
	    		$.ajax({
				    type: "POST",
				    url: "${pageContext.request.contextPath}/user/getVerifyCodeByPhone",
				    data: {phone:phone},
				    dataType: "json",
				    success: function(data){
				    	if(data.status == 500){
				    	}else{
				    		alert("网络异常,请稍后重试"); 
				    	}
				    }
				});
	         });

第四步：测试结果