注册发送验证码提示信息

注册发送验证码提示信息

手机号注册需要用正则判断;点击发送按钮提示输入框不为空;

这个例子是基于移动端:

 

 

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
            }
        })

  })