注册之手机发送验证码

前端展示效果:

代码:

 <input type="text" id="telephone" value="" name="telephone" placeholder="手机号"  />
 <input type="text" value="" name="checkCode"  placeholder="请输入验证码" />
 <input type="button"  onclick="sendCode(this)"  value="获取验证码">
//倒计时时间
var time = 10;
//定时器id,用于结束定时器
var intervalID;
//按钮对象
var bo;
//参数:获取验证码按钮对象
function sendCode(buttonObj) {
	//校验手机号格式是否正确
	//1 定义正则对象
	var regExp = new RegExp("^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\\d{8}$", "g");
	//2 校验
	if(!regExp.test($("#telephone").val())) {
		//失败=>提示请输入正确的手机号
		layer.msg("请输入正确的手机号");
		return;
	}
	//------------------------------------------------------------------
	//ajax请求后台发送手机验证码短信    url:向后台发送请求链接
	$.post(url, {
		telephone: $("#telephone").val()
	});
	//------------------------------------------------------------------
	bo = buttonObj;
	//1.点击按钮后,按钮变灰(禁用).并改变按钮上的文字为60秒后重新发送
	bo.disabled = true;
	bo.value = time + "秒后重新发送";
	//2.设置一个js定时器,每隔一秒触发一次方法
	intervalID = setInterval(timeCount, 1000);
}

function timeCount() {
	time = time - 1; //让秒数减一.
	//3.书写触发的方法: 
	//判断秒数是否大于0
	if(time > 0) {
		//大于0 = 更新按钮上的文字
		bo.value = time + "秒后重新发送";
	} else {
		//等于0 = 按钮恢复可以点状态,按钮上文字重新变为"获取验证码"
		bo.disabled = false;
		bo.value = "获取验证码";
		time = 10;
		//停掉定时器
		clearInterval(intervalID);
	}
}

猜你喜欢

转载自blog.csdn.net/zwd926/article/details/84752731