Registration Send message authentication code

Registration is required to determine the phone number with a positive; click the send button prompt input box is not empty;

This example is based on the mobile terminal:

 

 

HTML code:

　　
//提示信息
<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 code:

.mate_toast{

    margin-top: 0.137rem;

    width: 100%;

    height: 0.24rem;

}

.mate_toastDiv {

   display: none;

}

/ * Message text styles * / 
.mate_toastText { 
   Run the display : Block ; 
   margin : Auto ; 
   Letter-spacing : 0.044rem ; 
   Color : #FFFFFF ; 
   background-Color : # 333333 ; 
   font-size : 0.211rem ; 
   font-Family : " Light-SourceHanSansCN " ; 
   padding : 0.035rem 0.311rem ; 
   border-RADIUS : 0.106rem ; 
   Letter-spacing : 0.004rem ;
   position: absolute;
   left: 40%;
}

JS code:

$(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();
        } 
        // Click for Code first determine the phone number is correct 
        $ ( "mate_code.") The Click (. Function () {
             IF (disableds) return ;
             IF (btnDisables) return ;
             IF ($ ( "# the iPhone"! ). Val ()) { 
                showToast ( 'enter phone number', 3000 );
                 return ; 
            } 
            IF ((/ ^. 1 [3456789] \ {D}. 9 $ / Test ($ ( "# iPhone"!. ) .val ( )))) { 
                showToast ( 'a wrong number', 3000 );
                 return ; 
            } 
            IF (== 90 COUNTDOWN) {
                setTime ();     
        } 
            
        }); 
          );// 90s countdown 
        function setTime () { // send a verification code countdown 
            IF (COUNTDOWN == 0 ) { 
                $ ( '# iPhone') removeAttr ( "Disabled." ); 
                $ ( . " mate_code span ") text (." retrieve " ) 
                btnDisables = to false ; 
                COUNTDOWN = 90 ;
                 return ; 
            } the else { 
                $ ( '# iPhone') attr (." Disabled "," Disabled " 
                $ (".mate_code span") text (+ COUNTDOWN "S." ) 
                btnDisables = to true ; 
                COUNTDOWN - ; 
            } 
            the setTimeout ( function () { 
                setTime () 
            }, 1000 ) 
        } 
        // Click Submit 
        $ ( "mate_btn.") .click ( function () {
             IF (disableds) return ;
       IF ! ($ ( "# the iPhone" ) .val ()) { 
                showToast ( 'Please enter the phone number', 3000 );
                 ;return
            } 
      IF (! $ ( "# Code" ) .val ()) { 
                showToast ( 'Please enter PIN', 3000 );
                 return 
            } 
        }) 

  })