手机号注册需要用正则判断;点击发送按钮提示输入框不为空;
这个例子是基于移动端:
HTML代码:
//提示信息
<header> <div class="mate_toast"> <div class="mate_toastDiv"> <div class="mate_toastText"></div> </div> </div> </header>
//输入框 <section class="content"> <div class="weui-cells weui-cells_form"> <div class="phone_mation"> <div class="weui-cell__hd"> <label class="weui-label"><span>* </span>手机</label> <input class="weui-input-phone" type="text" id="iphone"> </div> </div> <div class="weui-cell weui-cell_active weui-cell_vcode"> <div class="weui-cell__hd"><label class="weui-labels"><span>* </span>验证码</label></div> <input autofocus="" class="weui-input-phone weui-mation" type="text" id="code" maxlength="6"> <div class="weui-cell__ft mate_code" id="determine"> <span class="weui-vcode-btns">获取验证码</span> </div> </div> </div> </section>
CSS代码:
.mate_toast{
margin-top: 0.137rem;
width: 100%;
height: 0.24rem;
}
.mate_toastDiv{
display: none;
}
/*提示信息文本样式*/
.mate_toastText{ display:block; margin: auto; letter-spacing: 0.044rem; color: #FFFFFF; background-color: #333333; font-size: 0.211rem; font-family: "SourceHanSansCN-Light"; padding: 0.035rem 0.311rem; border-radius: 0.106rem; letter-spacing: 0.004rem; position: absolute; left: 40%; }
JS代码:
$(function(){ var countdown = 90,birthdayDate, disableds = false,btnDisables=false; //显示弹出窗 function showToast(text, time) { $(".mate_toastText").text(text); $(".mate_toastDiv").show(); disableds = true; setTimeout(hideToast, time) } function hideToast() { disableds = false; $(".showDiv .mate_toastDiv").hide(); } //点击获取验证码 首先确定手机号是否正确 $(".mate_code").click(function() { if(disableds) return; if(btnDisables) return; if(!$("#iphone").val()) { showToast('请输入手机号', 3000); return; } if(!(/^1[3456789]\d{9}$/.test($("#iphone").val()))) { showToast('手机号码有误', 3000); return; } if(countdown == 90){ settime(); } }); //90s倒计时 function settime() { //发送验证码倒计时 if(countdown == 0) { $('#iphone').removeAttr("disabled"); $(".mate_code span").text("重新获取") btnDisables=false; countdown = 90; return; } else { $('#iphone').attr("disabled","disabled"); $(".mate_code span").text(countdown + "s") btnDisables=true; countdown--; } setTimeout(function() { settime() }, 1000) } //点击提交按钮 $(".mate_btn").click(function() { if(disableds) return; if(!$("#iphone").val()) { showToast('请输入手机号', 3000); return; } if(!$("#code").val()) { showToast('请输入验证码', 3000); return } }) })