QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 表单代码 > jQuery扫码/手机号码登录框切换代码

原创商用 jQuery扫码/手机号码登录框切换代码

jQuery大气通用的登录框切换页面,微信扫码,账户密码,手机号码三种切换登录功能。支持一键qq登录,微信登录,微博登录功能等。这是一款非常实用的多功能登录框切换代码。
分享到微信朋友圈
X
[声明]该素材是本站付费买断的作品代码,享受著作权?;?,未经允许请勿转载,否则追究相应的法律责任。

使用方法:

1、head引入css文件

<link href="css/style.css" rel="stylesheet" type="text/css" />

2、head引入js文件

<script type="text/javascript" src="js/jquery.min.js"></script>

3、body引入HTML代码

<div class="aui-register-popup">
	<div class="aui-register-box">
		<div class="aui-register-link">
			<a href="javascript:;" class="fl">返回首页</a>
			<a href="javascript:;" class="fr">已有账号?去登录</a>
		</div>
		<div class="aui-register-logo">
			<img src="images/logo.png" alt="">
		</div>
		<div class="aui-register-form" id="verifyCheck">
			<div class="register-wrap" id="register-wrap">
				<div class="register" id="register">
					<div class="register-top" id="reg-top">
						<h2 class="normal" id="normal">普通登录</h2>
						<h2 class="nopassword" id="nopw">手机无密码登录</h2>
						<a id="qrcode" href="#">
							<span class="aui-tag-size">扫码登录</span>
						</a>
					</div>
					<!--账户密码登录-->
					<div class="register-con" id="rc">
						<div class="aui-register-form-item">
							<input type="text" name="username" maxlength="20"  placeholder="账户名" class="txt03 f-r3 required" tabindex="3" data-valid="isNonEmpty||between:3-20||isUname" data-error="<i class='icon-tips'></i>您还没有输入账户名||<i class='icon-tips'></i>用户名长度3-20位||<i class='icon-tips'></i>只能输入字母、数字、且以中文或字母开头" id="adminNo">
							<label class="focus valid"></label>
						</div>
						<div class="aui-register-form-item">
							<input type="password" name="password" placeholder="密码" id="password" maxlength="20" class="txt04 f-r3 required" tabindex="4" style="ime-mode:disabled;" onpaste="return  false" autocomplete="off" data-valid="isNonEmpty||between:6-20||level:2" data-error="<i class='icon-tips'></i>密码太短,最少6位||<i class='icon-tips'></i>密码长度6-20位||<i class='icon-tips'></i>密码太简单,有被盗风险,建议字母+数字的组合">
							<label class="focus valid"></label>

						</div>
						<div class="aui-register-form-item">
							<p class="aui-for-pwd">
								<a class="" href="#">忘记密码</a>
							</p>
							<input id="aui-btn-reg" class="aui-btn-reg" placeholder=""  readonly="readonly" value="登录" >
						</div>
						<div class="aui-protocol">
							登录即同意
							<a  href="#">《17素材网使用协议》</a>&
							<a  href="#">《隐私权条款》</a>
						</div>
						<div class="aui-thirds">
							<a href="#">
								<i class="aui-qq-img"></i>
								<i>QQ登录</i>
							</a>
							<a href="#">
								<i class="aui-wx-img"></i>
								<i>微信登录</i>
							</a>
							<a href="#">
								<i class="aui-wb-img"></i>
								<i>微博登录</i>
							</a>
							<div class="clear"></div>
						</div>
					</div>

					<!--手机动态码登录-->
					<div class="login-con" id="lc">
						<div class="aui-register-form-item">
							<input type="text" name="phone" placeholder="手机号码" class="txt01 f-r3 required" keycodes="tel" tabindex="1" data-valid="isNonEmpty||isPhone" data-error="<i class='icon-tips'></i>请输入手机号||<i class='icon-tips'></i>手机号码格式不正确" maxlength="11" id="phone">
							<label class="focus valid"><div class="msg" style="display:none"><i class='icon-tips'></i>您还未输入手机号</div></label>
							<span class="aui-get-code btn btn-gray f-r3 f-ml5 f-size13" id="time_box" disabled style="display:none;"></span>
							<span class="aui-get-code btn btn-gray f-r3 f-ml5 f-size13" id="verifyYz" >获取动态码</span>
						</div>
						<div class="aui-register-form-item">
							<input type="text" placeholder="动态码" maxlength="6" id="verifyNo" class="txt02 f-r3 f-fl required" tabindex="2" data-valid="isNonEmpty||isInt" data-error="<i class='icon-tips'></i>请填写正确的手机动态码||<i class='icon-tips'></i>请填写6位手机动态码">
							<label class="focus valid"></label>
						</div>
						<div class="aui-register-form-item">
							<input id="aui-btn-reg1" class="aui-btn-reg" placeholder=""  readonly="readonly" value="登录" >
						</div>
						<div class="aui-protocol">
							登录即同意
							<a  href="#">《17素材网使用协议》</a>&
							<a  href="#">《隐私权条款》</a>
						</div>
						<div class="aui-thirds">
							<a href="#">
								<i class="aui-qq-img"></i>
								<i>QQ登录</i>
							</a>
							<a href="#">
								<i class="aui-wx-img"></i>
								<i>微信登录</i>
							</a>
							<a href="#">
								<i class="aui-wb-img"></i>
								<i>微博登录</i>
							</a>
							<div class="clear"></div>
						</div>
					</div>


					<!-- 扫码登录 -->
					<div class="saoma" id="sm">
						<div class="screen-tu" id="screen">
							<span class="aui-tag-size">密码登录</span>
						</div>
						<div class="aui-text-item">
							<h1>1秒即登录,方便又安全</h1>
						</div>
						<div class="qr-code">
							<span class="tips_img"></span>
							<img src="images/code.png" alt="">
						</div>
						<div class="aui-tab-footer">
							<p>17扫码登录,同步账户信息 | <a href="#">下载17APP</a></p>
						</div>

					</div>
				</div>
			</div>
			<div class="clearfix"></div>
		</div>
		<div class="aui-register-bottom">
			<a>?188.com</a>
			<a href="#">联系客服</a>
			<a href="#">帮助中心</a>
			<div class="clear"></div>
		</div>
	</div>
</div>


<script type="text/javascript" src="js/login.js"></script>
<script type="text/javascript">
$(function() {
	$("#aui-btn-reg").click(function() {
		if (!verifyCheck._click()) return;
		alert('恭喜你!登录成功')

	});
	$("#aui-btn-reg1").click(function() {
		if (!verifyCheck._click()) return;
		alert('恭喜你!登录成功')

	});
});
</script>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
购彩堂 www.36569.com-香港澳门彩票网| www.14ur.com-信阳彩礼大概多少钱| www.806.tv-热门彩票软件下载| www.5086.pw-属虎彩票号-| www.15651.cc-彩铅画画-| www.63636.cc-返点最高彩票平台| www.019997.com-彩彩票网彩-| www.098002.com-快三五分钟一期| www.165985.com-青岛网上购彩票| www.236822.com-中国体彩官方客户端| www.315196.com-怎么时时彩才能赚钱| www.028651.com-排列三乐彩网走势| www.130613.com-哈尔滨福彩兑奖规则| www.750121.com-分分中彩票怎么样| www.982447.com-鸿彩提现-| www.yj37.com-乐购彩-| www.665337.com-四川体彩金七乐版| www.744325.com-彩票管理新规定| www.815369.com-福利彩票视频型彩票| www.892345.cc-好彩vipapp| www.959365.com-御彩轩下载-| 500彩票www.330672.com| www.02522.com-重庆福彩手机报可以| www.689.net-重庆时时彩对子预测| www.25327.com-安徽体彩ll选5| www.032607.com-彩票106福利版| www.0871.cm-全发国际彩票| www.828480.com-彩票代购合法吗| 幸运彩票www.444029.com| www.274643.com-机选彩票能中奖吗| www.835504.com-26号福彩开奖结果| www.392101.com-彩票官网手机客户端| www.649896.com-天牛图库天牛彩报| www.799109.com-网上可以开彩票店吗| www.943009.com-手机众彩网app| www.ce57.com-有没有玩一分快三的| www.01gf.com-福彩3d万能二码表| www.509988.com-河内彩后二技巧| www.89nk.com-全球彩票创始人| www.0rx.com-七乐彩是假的吗| www.365818.cc-重庆时时彩双单技巧| www.579642.com-逸彩美寓-| www.46454.com-好彩网一分钟快三| www.412463.com-彩票在线计划员| www.152623.com-七星彩在哪里买| www.361395.com-万达彩票登录网址| www.531413.com-彩铅古风背影人物画| www.ly18.com-为什么彩票网上停售| www.i10.org-酷彩吧-| www.86yc.com-彩票最近开奖号码| www.ws17.com-免费送彩金白菜网| www.533132.com-福彩3d技巧教程| www.636436.com-彩虹2无人机| www.732795.com-5百万彩票网| www.803763.com-网上不能买彩票了吗| www.904960.com-足球彩票app下载| PK彩票www.23040.com| www.zl57.com-腾讯分分彩2期必中| www.64kc.com-众彩可靠么-| www.5650.in-网上怎么兑换彩票| www.21798.cc-彩票首存-| www.75495.com-3d彩报二版-| www.wa58.com-快三表-| www.7569.biz-福彩计划三天必下| www.34860.com-幸运28送28彩金| www.962777.com-乐彩网摘文集| www.952556.com-时彩推广-| www.99300.cc-五分彩胆个位| www.513101.com-口袋彩票下架| www.029398.com-彩票投注大厅平台| www.cj49.com-易博彩票官方网站| www.e05.pw-竞彩8串28-| www.32yq.com-福利彩票夺宝| www.798.cn-重庆时时彩推荐| www.330644.com-下载一个上海快三| www.510004.com-神算子3d彩吧图库| www.722266.cc-舟山飞鱼彩票怎么玩| www.906860.com-合肥彩票中心在哪里| www.mt26.com-中彩网历史开奖软件| www.115043.com-福彩3d舟东综合图| www.221524.com-1分快三彩计划软件| www.994712.com-hck好彩客-| www.74wr.com-彩票押大押小技巧| www.419200.com-下载彩票易网下载| www.962917.com-彩圣字谜汇总| www.211817.com-福利彩票十一选五| www.996343.com-足彩单场在哪里买| www.kl73.com-中国竞彩网双色| www.40549.com-中彩彩票qq群| www.41rm.com-彩吧彩票骗局| www.9406.xyz-初玩彩票怎么玩法| www.885472.com-彩16是骗局吗| www.960409.com-黑彩平台靠谱吗| www.cai5535.com甘肃快三连线走势图| www.jm56.com-怎么在网上买彩票| www.e40.loan-风凰网彩票-| www.32sy.com-众大时时彩信誉平台| www.146.in-彩虹张惠妹mv| www.3067.biz-七彩乐今天开奖| www.63825.com-广西快三是官方开奖| www.906867.com-体育彩票哪个比较好| www.uk72.com-彩库宝典app下载| www.hk48.com-哪个彩票软件最正规| www.246429.com-山东体彩扑克3遗漏| www.531961.com-谁有彩票33软件| www.821152.com-牛彩涂3d牛彩图库| www.15qg.com-彩票店宣传-| www.35785.cc-彩票代玩账号刷钱| www.kp55.cc-江苏彩票中心在哪里| www.879965.com-巴彦淖尔市福彩中心| www.983348.com-新盈彩在线网址| www.ew42.com-彩票18075-| www.hz5.cc-快三龙的规律| www.582959.com-七克台彩玉原石| www.7368.cm-福彩3d数字范围| www.111042.com-掌上看家彩集| www.312689.com-9购彩票官网| www.68828.cc-彩票做号-| www.376244.com-博彩票计划-| www.565880.com-彩票泳坛夺金| www.678005.cc-买体彩世界杯| www.783115.com-福星中彩天下彩| www.868232.com-七星彩高手交流区| www.933343.com-牛彩排三预测| www.984920.com-体彩预测软件下载| www.cp9697.com-好彩3开奖结果查询| www.90be.com-体彩可以网上兑奖吗| www.607912.com-足彩网亚洲杯| www.700415.com-体彩第19043期| www.770877.com-竞彩足球app源码| www.832205.com-七彩网是真的吗| www.123146.com-酷彩吧提现-| www.663365.com-今日七星彩预测头尾| www.653487.com-辉煌彩票怎么升级快| www.cp8234.cc-河北快三开奖走势图| www.270290.com-可以查看彩票的软件| www.343050.com-福彩千禧试机号| www.360446.com-彩影2010-| www.505992.com-许昌盛彩招募车主| www.589264.com-陕西省省体彩中心| www.770224.com-时时彩要停吗| www.1rw.com-负债累累彩票救命| www.28881.cc-中华体彩网-| www.ca8.cc-彩票反水是什么意思| www.194038.com-彩票长龙软件| www.253197.com-德州好彩快三| www.332029.com-十选五是正规彩票吗| www.770651.com-福彩15选5开奖号| www.843393.com-中国福利彩票规律| www.921275.com-彩神ii官方网| www.982202.com-上海福彩网下载软件| www.aa67.com-体彩开奖公告| www.qn27.com-快三一天多少期| www.28na.com-手机彩票在线投注| www.851186.cc-时时彩怎样玩不会输| www.3jm.cc-热购彩票是真是假| www.095756.com-竞猜彩票app| www.53kk.com-体彩领奖到哪里领取| 彩票8www.cp8007.cc| www.755342.com-炫彩彩票软件怎么样| www.473104.com-福利彩票教学| 鑫亿彩www.087079.com| www.02by.com-美国28时时彩开奖| www.pv35.com-长城彩票挣钱真假|