html用户登陆界面代码（网页设计css代码大全）

好久没有写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);
			 }
		}
	})