HTML，JS信息表单注册，点击获取验证码

HTML，JS信息表单注册，点击获取验证码

效果图

效果演示

HTML，js信息注册表单获取验证码

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>

css样式

body{margin:0;padding:0}
.modal_content{width:500px;margin:50px auto 0;padding:30px;display:flex;justify-content:center;flex-direction:column;box-sizing:border-box;padding:30px;border:1px solid #ddd}
.modal_content>div{margin-bottom:20px}
.modal_content>h5:first-child{margin:30px 0;font-size: 18px;color: #d6061c;font-weight: bold;}
#dialog label{color:#666}
#phone1{display:block;width:100%;height:70px;background:0 0;padding-top:30px;border:0;outline:0;margin-top:-30px;font-size:16px;border-bottom:1px solid rgba(0,0,0,.2);border-radius:0}
.code1{display:flex;flex-direction:row;justify-content:space-between;width:100%;height:70px;background:0 0;padding-top:30px;margin-top:-30px;font-size:16px;border-bottom:1px solid rgba(0,0,0,.2);border-radius:0}
#code1{width:calc(100% - 90px);height:55px;background:0 0;padding-top:20px;border:0;outline:0;margin-top:-20px;font-size:16px}
#btnSendCode1{width:90px;height:30px;padding:0 5px;margin:0;font-size:14px;background:0 0;border-radius:30px;color:#a07941;border-color:#a07941;outline:0}
::-webkit-input-placeholder{font-size:14px;color:rgba(0,0,0,.4)}
:-moz-placeholder{font-size:14px;color:rgba(0,0,0,.4)}
::-moz-placeholder{font-size:14px;color:rgba(0,0,0,.4)}
:-ms-input-placeholder{font-size:14px;color:rgba(0,0,0,.4)}
.next{text-align:center;margin:20px 0}
.next button{width:140px;height:40px;padding:0;margin:auto;background:#007bff;color:#fff;border:0;outline:0;border-radius:3px}

JS代码

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('请输入验证码!')
}