注册发送验证码提示信息

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

这个例子是基于移动端:

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

  })