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