jQuery手机登录注册表单代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery手机登录注册表单代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery手机登录注册表单代码</title>
<meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport" />
<link type="text/css" rel="stylesheet" href="skin/css/basic.css" />
<script type="text/javascript" src="skin/js/jquery-1.7.2.min.js"></script>
<!--加载样式-->
<script>
$(window).load(function() {
	$("#status").fadeOut();
	$("#preloader").delay(350).fadeOut("slow");
})
</script>
</head>

<body>
<div class="w">
  <!--页面加载 开始-->
  <div id="preloader">
    <div id="status">
      <p class="center-text">加载中…<em>网速有点不给力哦!</em> </p>
    </div>
  </div>
  <!--页面加载 结束--> 
  <!--header 开始-->
  <header>
    <div class="header"> <a class="new-a-back" href="javascript:history.back();"> <span>返回</span> </a>
      <h2>登录</h2>
      <a class="new-a-jd" id="trigger-overlay" href="javascript:void(0)"> <span>导航菜单</span> </a>
      </div>
  </header>
  <!--header 结束-->
  <div class="page">
    <div class="main">
      <form id="frm_login" method="post" action="">
        <div class="item item-username">
          <input id="username" class="txt-input txt-username" type="text" placeholder="请输入用户名/邮箱/手机号" value="" name="username">
          <b class="input-close" style="display: none;"></b> </div>
        <div class="item item-password">
          <input id="password" class="txt-input txt-password ciphertext" type="password" placeholder="请输入密码" name="password" style="display: inline;">
          <input id="ptext" class="txt-input txt-password plaintext" type="text" placeholder="请输入密码" style="display: none;" name="ptext">
          <b class="tp-btn btn-off"></b> </div>
        <div class="item item-login-option"> <span class="retrieve-password"> <a class="" href="#"> 找回密码</a> </span>
          <div class="clr"></div>
        </div>
        <div class="ui-btn-wrap"> <a class="ui-btn-lg ui-btn-primary" href="#">用户登录</a> </div>
        <div class="ui-btn-wrap"> <a class="ui-btn-lg ui-btn-danger" href="reg.html">没有账号？立即注册</a> </div>
        <div class="item item-login-other">
          <dl>
            <dt>其它登录方式</dt>
            <dd> <a class="qq" href="#"> <span><img alt="" src="skin/images/login_qq.png" width="40" height="40"></span> </a> <a class="weibo" href="#"> <span><img alt="" src="skin/images/login_wb.png" width="40" height="40"></span> </a> </dd>
          </dl>
        </div>
      </form>
    </div>
    <script type="text/javascript" >
    $(function() {
		$(".input-close").hide();
		displayPwd();
		remember();
		showActionError();
		autoHeight_login();
		dispValidateCode();
		displayClearBtn();
		setTimeout(displayClearBtn, 200 ); //延迟显示,应对浏览器记住密码
	});	

	//是否显示清除按钮
	function displayClearBtn(){
		if(document.getElementById("username").value != ''){
			$("#username").siblings(".input-close").show();
		}
		if(document.getElementById("password").value != ''){
			$(".ciphertext").siblings(".input-close").show();
		}
		if($("#codeLevel").val()!="" && $("#codeLevel").val()!='0'){
			if($("#validateCode").val()!=""){
				$("#validateCode").siblings(".input-close").show();
			}
		}
	}

	//清除input内容
    $('.input-close').click(function(e){  
		$(e.target).parent().find(":input").val("");
		$(e.target).hide();
		$($(e.target).parent().find(":input")).each(function(i){
			if(this.id=="ptext" || this.id=="password"){
				$("#password").val('');
				$("#ptext").val('');
			}
         });
    });  
	
	//设置password字段的值	
	$('.txt-password').bind('input',function(){
		$('#password').val($(this).val());
	});
	
	//显隐密码切换
	function displayPwd(){
    	$(".tp-btn").toggle(
          function(){
            $(this).addClass("btn-on");
			var textInput = $(this).siblings(".plaintext");
    		var pwdInput = $(this).siblings(".ciphertext");
			pwdInput.hide();
			textInput.val(pwdInput.val()).show().focusEnd();
          },
          function(){
		  	$(this).removeClass("btn-on");
		  	var textInput = $(this).siblings(".plaintext ");
    		var pwdInput = $(this).siblings(".ciphertext");
            textInput.hide();
			pwdInput.val(textInput.val()).show().focusEnd();
          }
    	);
	}
	
	//一个月免登陆切换
	function remember(){
    	$("#rememberMe").toggle(
          function(){
            $(this).removeClass("login-free-selected");
			 $('#remember').val("false");
          },
          function(){
		  	$(this).addClass("login-free-selected");
		  	 $('#remember').val("true");
          }
    	);
	}

	//监控用户输入
	$(":input").bind('input propertychange', function() {
		if($(this).val()!=""){
			$(this).siblings(".input-close").show();
		}else{
			$(this).siblings(".input-close").hide();
		}
    });
</script> 
  </div>
  <!--footer 开始-->
  <div class="footer">
    <nav>
      <ul class="footer_menu">
        <li><a href="tel:13888888888"><img src="skin/images/plugmenu1.png">
          <label>联系我们</label>
          </a></li>
        <li><a href="#"><img src="skin/images/plugmenu4.png">
          <label>服务中心</label>
          </a></li>
        <li class="home"><a href="#"></a></li>
        <li><a href="#"><img src="skin/images/plugmenu3.png">
          <label>热门活动</label>
          </a></li>
        <li><a href="#"><img src="skin/images/plugmenu2.png">
          <label>搜索车辆</label>
          </a></li>
      </ul>
    </nav>
  </div>
  <!--footer end-->
</div>
</body>
</html>

HTML代码(reg.html):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery手机登录注册表单代码</title>
<meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport" />
<link type="text/css" rel="stylesheet" href="skin/css/basic.css" />
<script type="text/javascript" src="skin/js/jquery-1.7.2.min.js"></script>
<!--加载样式-->
<script>
$(window).load(function() {
	$("#status").fadeOut();
	$("#preloader").delay(350).fadeOut("slow");
})
</script>
</head>

<body>
<div class="w"> 
  <!--页面加载 开始-->
  <div id="preloader">
    <div id="status">
      <p class="center-text">加载中…<em>网速有点不给力哦!</em> </p>
    </div>
  </div>
  <!--页面加载 结束--> 
  <!--header 开始-->
  <header>
    <div class="header"> 
    <a class="new-a-back" href="javascript:history.back();"> <span>返回</span> </a>
      <h2>注册</h2>
    <a class="new-a-jd" id="trigger-overlay" href="javascript:void(0)"> <span>导航菜单</span> </a> 
    </div>
  </header>
  <!--header 结束-->
  <div class="page">
    <div class="main">
      <form id="frm_login" method="post" action="">
        <div class="item item-username">
          <input id="username" class="txt-input txt-username" type="text" placeholder="常用手机号" value="" name="username">
          <b class="input-close" style="display: none;"></b> </div>
        <div class="item item-username">
          <input id="username" class="txt-input txt-username" type="text" placeholder="请输入邮箱" value="" name="username">
          <b class="input-close" style="display:none;"></b> </div>
        <div class="item item-password">
          <input id="password" class="txt-input txt-password ciphertext" type="password" placeholder="请输入密码" name="password" style="display: inline;">
          <input id="ptext" class="txt-input txt-password plaintext" type="text" placeholder="请输入密码" style="display: none;" name="ptext">
          <b class="tp-btn btn-off"></b> </div>
        <div class="item item-password">
          <input id="password_PwdTwo" class="txt-input txt-password_PwdTwo ciphertext_PwdTwo" type="password" placeholder="确认密码" name="password_PwdTwo" style="display: inline;">
          <input id="ptext_PwdTwo" class="txt-input txt-password_PwdTwo plaintext_PwdTwo" type="text" placeholder="确认密码" style="display: none;" name="ptext_PwdTwo">
          <b class="tp-btn_PwdTwo btn-off_PwdTwo"></b> </div>
        <div class="item item-captcha">
          <div class="input-info">
            <input id="validateCode" class="txt-input txt-captcha" type="text" placeholder="验证码" autocomplete="off" maxlength="6" size="11">
            <b id="validateCodeclose" class="input-close" onclick="validateCodeclose();" style="display: block;"></b> <span id="captcha-img"> <img id="code" src="skin/images/code.jpg" style="width:63px;height:25px;" onclick="closeAndFlush();"> </span> </div>
          <div class="err-tips"> 注册即视为同意 <a target="_blank" href="#">用户服务协议</a> </div>
        </div>
        <div class="ui-btn-wrap"> <a class="ui-btn-lg ui-btn-primary" href="#">用户注册</a> </div>
      </form>
    </div>
    <script type="text/javascript" >
    $(function() {
		$(".input-close").hide();
		displayPwd();
		displayPwd_PwdTwo();
		remember();
		showActionError();
		autoHeight_login();
		dispValidateCode();
		displayClearBtn();
		setTimeout(displayClearBtn, 200 ); //延迟显示,应对浏览器记住密码
	});	

	//是否显示清除按钮
	function displayClearBtn(){
		if(document.getElementById("username").value != ''){
			$("#username").siblings(".input-close").show();
		}
		if(document.getElementById("password").value != ''){
			$(".ciphertext").siblings(".input-close").show();
		}
		if(document.getElementById("password_PwdTwo").value != ''){
			$(".ciphertext_PwdTwo").siblings(".input-close").show();
		}
	}

	//清除input内容
    $('.input-close').click(function(e){  
		$(e.target).parent().find(":input").val("");
		$(e.target).hide();
		$($(e.target).parent().find(":input")).each(function(i){
			if(this.id=="ptext" || this.id=="password"){
				$("#password").val('');
				$("#ptext").val('');
			}
			if(this.id=="ptext_PwdTwo" || this.id=="password_PwdTwo"){
				$("#password_PwdTwo").val('');
				$("#ptext_PwdTwo").val('');
			}
         });
    });  
	
	//设置password字段的值	
	$('.txt-password').bind('input',function(){
		$('#password').val($(this).val());
	});
	$('.txt-password_PwdTwo').bind('input',function(){
		$('#password_PwdTwo').val($(this).val());
	});
	
	//显隐密码切换
	function displayPwd(){
    	$(".tp-btn").toggle(
          function(){
            $(this).addClass("btn-on");
			var textInput = $(this).siblings(".plaintext");
    		var pwdInput = $(this).siblings(".ciphertext");
			pwdInput.hide();
			textInput.val(pwdInput.val()).show().focusEnd();
          },
          function(){
		  	$(this).removeClass("btn-on");
		  	var textInput = $(this).siblings(".plaintext");
    		var pwdInput = $(this).siblings(".ciphertext");
            textInput.hide();
			pwdInput.val(textInput.val()).show().focusEnd();
          }
    	);
	}
	//显隐密码切换
	function displayPwd_PwdTwo(){
    	$(".tp-btn_PwdTwo").toggle(
          function(){
            $(this).addClass("btn-on_PwdTwo");
			var textInput = $(this).siblings(".plaintext_PwdTwo");
    		var pwdInput = $(this).siblings(".ciphertext_PwdTwo");
			pwdInput.hide();
			textInput.val(pwdInput.val()).show().focusEnd();
          },
          function(){
		  	$(this).removeClass("btn-on_PwdTwo");
		  	var textInput = $(this).siblings(".plaintext_PwdTwo");
    		var pwdInput = $(this).siblings(".ciphertext_PwdTwo");
            textInput.hide();
			pwdInput.val(textInput.val()).show().focusEnd();
          }
    	);
	}
	
	//监控用户输入
	$(":input").bind('input propertychange', function() {
		if($(this).val()!=""){
			$(this).siblings(".input-close").show();
		}else{
			$(this).siblings(".input-close").hide();
		}
    });
</script> 
  </div>
  <!--footer 开始-->
  <div class="footer">
    <nav>
      <ul class="footer_menu">
        <li><a href="tel:13888888888"><img src="skin/images/plugmenu1.png">
          <label>联系我们</label>
          </a></li>
        <li><a href="#"><img src="skin/images/plugmenu4.png">
          <label>服务中心</label>
          </a></li>
        <li class="home"><a href="#"></a></li>
        <li><a href="#"><img src="skin/images/plugmenu3.png">
          <label>热门活动</label>
          </a></li>
        <li><a href="#"><img src="skin/images/plugmenu2.png">
          <label>搜索车辆</label>
          </a></li>
      </ul>
    </nav>
  </div>
  <!--footer end--> 
</div>
</body>
</html>

JS代码(demo7.js):

(function(){
	var container = document.querySelector( 'div.container' ),triggerBttn = document.getElementById( 'trigger-overlay' ),overlay = document.querySelector( 'div.overlay' ),closeBttn = overlay.querySelector( 'button.overlay-close' );
	transEndEventNames ={
	'WebkitTransition':'webkitTransitionEnd','MozTransition':'transitionend','OTransition':'oTransitionEnd','msTransition':'MSTransitionEnd','transition':'transitionend'}
,transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],support ={
	transitions:Modernizr.csstransitions}
;
	function toggleOverlay(){
	if( classie.has( overlay,'open' ) ){
	classie.remove( overlay,'open' );
	classie.remove( container,'overlay-open' );
	classie.add( overlay,'close' );
	var onEndTransitionFn = function( ev ){
	if( support.transitions ){
	if( ev.propertyName !== 'visibility' ) return;
	this.removeEventListener( transEndEventName,onEndTransitionFn );
}
classie.remove( overlay,'close' );
}
;
	if( support.transitions ){
	overlay.addEventListener( transEndEventName,onEndTransitionFn );
}
else{
	onEndTransitionFn();
}
}
else if( !classie.has( overlay,'close' ) ){
	classie.add( overlay,'open' );
	classie.add( container,'overlay-open' );
}
}
triggerBttn.addEventListener( 'click',toggleOverlay );
	closeBttn.addEventListener( 'click',toggleOverlay );
}
)();

CSS代码(style8.css):

/* Overlay style */
.overlay{position:fixed;width:100%;height:100%;top:0;left:0;background:#ffffff;z-index:9999;}
/* Overlay closing cross */
.overlay .overlay-close{cursor:pointer;width:30px;height:30px;position:absolute;right:10px;top:10px;overflow:hidden;border:none;background:url(../images/icon_cols.png) no-repeat 0 0/30px 30px;color:transparent;outline:none;z-index:100;}
/* Menu style */
/* Effects */
.overlay-contentscale{visibility:hidden;-webkit-transform:translateY(100%);transform:translateY(100%);-webkit-transition:-webkit-transform 0.7s,visibility 0s 0.7s;transition:transform 0.7s,visibility 0s 0.7s;}
.overlay-contentscale.open{visibility:visible;-webkit-transform:translateY(0%);transform:translateY(0%);-webkit-transition:-webkit-transform 0.7s;transition:transform 0.7s;}
.lay-right{width:100%;overflow:hidden;}
.asideMenu{background:#4eabe8;width:100%;}
.aCont{overflow:hidden;width:200px;position:relative;margin:0 auto;z-index:9999;}
.aHead{height:120px;position:relative;}
.aHead span{position:absolute;width:100%;height:150px;display:block;left:50%;top:50%;margin-top:-49px;margin-left:-100px;text-align:center;}
.aHead span img{width:70px;height:70px;display:block;margin:0px auto;border-radius:50px;-webkit-border-radius:50px;-moz-border-radius:50px;}
.aHead span a,.aHead span em,.version a,.version em{font-style:normal;font-size:16px;/**浠?4px鏀瑰埌16px;**/
line-height:40px;color:#fff;font-weight:normal;}
.aHead span font{vertical-align:middle;font-style:normal;font-size:16px;/**浠?4px鏀瑰埌16px;**/
line-height:40px;color:#fff;}
.aHead span em,.version em{color:#fff;padding:0px 10px;}
.content-slide{padding:8px 10px;color:#fff;}
.content-slide>a{width:25%;float:left;text-align:center;color:#000000;overflow:hidden;margin-bottom:15px;}
.title{font-size:12px;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ico img{width:62px;height:62px;border-radius:0;}
@media screen and (max-height:30.5em){.overlay nav{height:70%;font-size:34px;}
.overlay ul li{min-height:34px;}
}

附件:下载该文件资源,减少时间成本(增值服务)