jQuery 手机验证码计时功能

现在网站或者 app 注册都流行手机验证码，但是不知道大家有没有考虑过一个问题，如果一个用户可以连续获取验证短信，那我们是不是可以把仇人的手机号码填进去，然后一直获取验证短信达到骚扰他的目的？ 事实上经过我的验证很多短信轰炸的软件都是这么做的，这里我们前端并不能防范，但是前端可以防止用户恶意操作，这么做的目的是因为发短信是要钱的。。。

闲话就说到这里了，现在开始讲解到底该怎么做

先做一个输入框 旁边放一个更换手机号码的按钮 像这样

然后再做一个模态框

填写完手机号码之后，点击获取验证码按钮

当然前端也需要对用户填写的手机号码进行判断是否正确，往这个方法里面传一个号码，正确的话会返回 true 反之亦然

/*验证手机号码*/
function vaildphone(num) {
	var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/
  if(mobile.test(num) && num.length == 11) {
		return true
  }else {
		return false
  }
}
​

这涉及到正则表达式，不再详细讲解自行度娘

当用户的手机号码正确了，我们把号码 post 到后台，后台调用 api 即可发送短信到大家的手机上（后台我们也不讲涉及到太多）
这时候我们的获取验证码按钮就开始 CD 了

像这样

好的，开始讲重点

/*倒计时*/
function cutDown(time) {
	setTimeout(function() {
		//getPhoneCode就是获取验证码的按钮
		$("#getPhoneCode").html(time + "秒后重试")
		time--
		cutDown(time)
	}, 1000)
}
​

使用 setTimtout 方法用来做延迟 单位是毫秒 所以给了个 1000，每次过一秒种就会对传进来的参数进行减动作，这应该很好理解
减完之后 这里用到了递归的方法 继续调用自身 知道 time 这个变量大于 0 为止，这段代码就实现了倒计时的功能。

这样就就可以了吗？答案当然是不行！ 如果用户一刷新那么按钮就会变回原来的样子这肯定是不行的
所以我想到了用 cookie，cookie 是储存在用户手机浏览器里的，当然它可以改但一般的用户肯定是不会的
我们不考虑意外因素只用实现业务逻辑就行了，其他的交给后端去做

$.post(url + "changePhone", { 'phone': $("#phoneNumber").val() }, function(data) {
	var status = $.parseJSON(data).status
  if(status == 0){
		al6rt("获取验证码频繁请稍后再试")
	}else if(status == 1) {
		//生成时间戳并加上3分钟 即是 180秒 * 1000
		$.cookie('time', (new Date()).getTime() + 180000)
		$("#getPhoneCode").unbind('click')
		cutDown(180)
		$("#phoneCode").css('display','block')
	}else if(status == 2) {
		al6rt("该号码已经注册")
	}
​

al6rt 是我写的冒泡提示框等同于 alert

/*倒计时*/
function cutDown(time) {
	if(time > 0){
		setTimeout(function() {
			//getPhoneCode就是获取验证码的按钮
			$("#getPhoneCode").html(time + "秒后重试")
			time--
			cutDown(time)
		}, 1000)
	}else {
		//超过3分钟后给按钮绑定点击时间
		$("#getPhoneCode").html("获取验证码")
		$("#getPhoneCode").bind('click', getCode)
	}
}
​

这样一来超过 3 分钟后按钮就变回原来的获取验证码，并绑定获取验证码的方法

/*初始化验证码*/
if((new Date()).getTime() > $.cookie('time') || $.cookie('time') == undefined){
	$("#getPhoneCode").bind('click',getCode)
}else {
	var s = ($.cookie('time') - (new Date()).getTime()) /1000
	cutDown(parseInt(s))
}
​

1. 每次打开页面都会初始化一下按钮如果 cookie 中储存的时间戳大于当前的那么它会继续倒计时
2. 如果小于当前的时间戳说明它已经超过 3 分钟了或者它为空就说明用户还没获取过验证码，那么它为原来的获取验证码按钮

具体的业务逻辑可以到我们服务号来观看

The End