jquery控制登入框涉及到的程式碼

好久沒有寫jquery控制頁面的程式碼了，今天前端沒有來，我來應付一下：

先來看一下HTML登入的程式碼：

1、頁面程式碼

<div class="page-box">
        <div class="login-container">
          <div class="login-ban"></div>
          <div class="login-wrapper">
            <ul class="login-nav">
              <li class="active">密碼登入</li>
              <li>手機登入</li>
            </ul>
            <form class="login-form" action="" method="get">

              <!--password type-->
              <div class="login-type" id="passwordLogin">
                <div class="login-group">
                  <!--
                    報錯樣式
                    1、'login-box'新增class 'page-form-error'
                    2、'login-input'新增class 'page-input-error'
                  -->
                  <div class="login-box page-form-error">
                    <span class="login-icon-phone"></span>
                    <input maxlength="11" class="login-input" type="tel" name="mobile" value="" placeholder="請輸入您的手機號">
                    <p class="page-form-tip"></p>
                  </div>
                </div>
                <div class="login-group">
                  <div class="login-box page-form-error">
                    <span class="login-icon-psd"></span>
                    <input class="login-input" type="password" name="password" value="" placeholder="請輸入密碼">
                  </div>
                </div>
              </div>
              <!--/password type-->

              <!--phone type-->
              <div style="display: none;" class="login-type" id="verifyLogin">
                <div class="login-group">
                  <div class="login-box page-form-error">
                    <span class="login-icon-phone"></span>
                    <input maxlength="11" class="login-input" type="tel" name="mobile" value="" placeholder="請輸入您的手機號">
                  </div>
                </div>
                <div class="login-group">
                  <div class="login-box page-form-error">
                    <span class="login-icon-code"></span>
                    <input class="login-input" type="tel" name="verifyCode" value="" placeholder="請輸入手機驗證碼">
                    <a class="login-identify-code">獲取驗證碼</a>
                  </div>
                </div>
              </div>
              <!--/phone type-->
			  <span id="confirmMsg" style="color: red;font-size: 12px;margin-bottom: 5px;"></span>
              <a color="violet" id="submitBtn" size="block" class="page-button">立即登入</a>
            </form>

            <ul class="login-others-type">
              <li><a class="login-others-link" href=""><span class="login-icon-weixin"></span>微信登陸</a></li>
              <li><a class="login-others-link" href=""><span class="login-icon-qq"></span>QQ登陸</a></li>
            </ul>
            
            <div class="login-footer">
              <a class="login-footer-item" href="">忘記密碼？</a>
              <a class="login-footer-item blue" href="reg-step-01.html">立即註冊</a>
            </div>
          </div>
        </div>
      </div>
複製程式碼

2、頁面效果

3、jquery控制程式碼

3.1、切換登入區域

	$(".login-nav li").click(function(){
		var liText = $(this).text();
		$(".login-nav li").removeClass("active");
		$(this).addClass("active");
		if(liText.indexOf("密碼登入")>-1){
			$("#passwordLogin").show();
			$("#verifyLogin").hide();
		}
		
		if(liText.indexOf("手機登入")>-1){
			$("#passwordLogin").hide();
			$("#verifyLogin").show();
		}
	})
複製程式碼

3.2、手機號校驗

//手機號校驗
$(".login-type input[name='mobile']").blur(function(){
	var mobilePhone = $(this).val();
	var isPhone = isPhoneNo(mobilePhone);
	console.log(isPhone);
	if(!isPhone){
		console.log("手機號校驗");
		$(this).addClass("page-input-error");
	}else{
		$(this).removeClass("page-input-error");
	}
})
	
// 驗證手機號
function isPhoneNo(phone) {
	var pattern = /^1[34578]\d{9}$/;
	return pattern.test(phone);
}
複製程式碼

3.3、傳送驗證碼

效果圖

傳送按鈕涉及到到的程式碼包括倒數計時：

/**
	 * 傳送驗證碼
	 */
	$(".login-identify-code").click(function(){
		var btnText = $(this).text();
		if(btnText!='獲取驗證碼'){
			return;
		}
		var mobile = $("#verifyLogin input[name='mobile']").val();
		if(mobile==""){
		    $("#verifyLogin input[name='mobile']").addClass("page-input-error");			 
		}
		//判斷手機號
		var hasErr = $("#verifyLogin input[name='mobile']").hasClass("page-input-error");
		if(hasErr){
		   return;
		}
		var param = new Object();
		param.mobile = mobile;
		param.sendType = "webLogin";
	
		var postResponse = syncHttp(getUrlConfig().sendMobileVerifyCode,param);
		if(postResponse){
			 var code = postResponse.code;
			 if(code=="00"){
				 console.log("傳送成功");
				 var topV = 60;
				 var interval = setInterval(function(){
					 topV--;
					 $(".login-identify-code").html(topV+"s後重試");
					 if(topV==0){
						 $(".login-identify-code").html("獲取驗證碼");
						 clearInterval(interval);
					 }
				 }, 1000);
			 }else{
				 console.log("登入失敗伺服器返回錯誤為%s:",postResponse.msg);
				 $("#confirmMsg").html(postResponse.msg);
			 }
		}
	})
複製程式碼