1. 程式人生 > >註冊之手機發送驗證碼

註冊之手機發送驗證碼

前端展示效果:

程式碼:

 <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);
	}
}