注冊發送驗證碼提示資訊-有解無憂

手機號注冊需要用正則判斷；點擊發送按鈕提示輸入框不為空；

這個例子是基于移動端:

HTML代碼：

　　
//提示資訊
<header>
        <div >
            <div >
              <div ></div>
            </div>
        </div>
    </header>
//輸入框
    <section >
        <div >
            <div >
              <div >
                <label ><span>* </span>手機</label>
                <input  type="text" id="iphone">
              </div>
            </div>
            <div >
              <div ><label ><span>* </span>驗證碼</label></div>
              <input autofocus=""  type="text"  id="code" maxlength="6">
              <div  id="determine">
                <span >獲取驗證碼</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
            }
        })

  })

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/145766.html

標籤：JavaScript

上一篇：windows手動安裝npm教程即vue

下一篇：ES6筆記一