利用jQuery实现手机注册表单获取验证码代码



19 73 25



特效描述:利用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

加群请备注:从官网了解到