利用jQuery實現手機注冊表單獲取驗證碼代碼



16 60 21



特效描述:利用jQuery實現 手機注冊 表單獲取 驗證碼代碼,利用jQuery實現手機注冊表單獲取驗證碼代碼

代碼結構

1. 引入CSS

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>

3. HTML代碼

<div class="modal_content">		
	<h5>綁定用戶信息!</h5>
	<div>
		<label for="phone1">注冊手機號:</label><br />
		<input id="phone1" type="text" autocomplete="off" placeholder="請輸入已綁定的手機號">				
	</div> 
	<div>
		<label for="code1">驗證碼:</label>
		<div class="code1">
			<input id="code1" type="text" autocomplete="off" placeholder="短信驗證碼">				
			<input id="btnSendCode1" type="button" class="btn btn-default" value="獲取驗證碼" onClick="sendMessage1()" />
		</div>				
	</div> 	
	<div class="next">  			
		<button onClick="binding()">確定</button>
	</div>
</div>	 	
<script type="text/javascript">
	var phoneReg = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/;//手機號正則 
	var count = 60; //間隔函數,1秒執行
	var InterValObj1; //timer變量,控制時間
	var curCount1;//當前剩余秒數
	/*第一*/
	function sendMessage1() {
		curCount1 = count;		 		 
		var phone = $.trim($('#phone1').val());
		if (!phoneReg.test(phone)) {
			alert(" 請輸入有效的手機號碼"); 
			return false;
		}
		//設置button效果,開始計時
		$("#btnSendCode1").attr("disabled", "true");
		$("#btnSendCode1").val( + curCount1 + "秒再獲取");
		InterValObj1 = window.setInterval(SetRemainTime1, 1000); //啟動計時器,1秒執行一次
		//向后臺發送處理數據
	}
	function SetRemainTime1() {
		if (curCount1 == 0) {                
			window.clearInterval(InterValObj1);//停止計時器
			$("#btnSendCode1").removeAttr("disabled");//啟用按鈕
			$("#btnSendCode1").val("重新發送");
		}
		else {
			curCount1--;
			$("#btnSendCode1").val( + curCount1 + "秒再獲取");
		}
	} 
	/*提交*/
	function binding(){
		alert(1)
	}
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 切換按鈕 表單 表單美化 表單插件 表單美化插件 文本框 text文本框 注冊框 驗證碼
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子 龙王捕鱼破解版 天涯明月刀ol新区赚钱 中国山东时时彩 双色球蓝球走势图 28彩票网址 淘宝快3预测 海南环岛赛规则 福利彩票官网 928彩票安卓 大乐透短信投注方法 腾讯分分彩计划软件 用手机这样赚钱的app 靠谱的看视频赚钱软件吗 修手机可赚钱 利用酒店的电赚钱 重庆是时时彩开奖