天天看點

注冊之手機發送驗證碼

前端展示效果:

注冊之手機發送驗證碼

代碼:

注冊之手機發送驗證碼
<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);
	}
}