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.809308.com-手机版彩客网| www.3689.biz-a3彩色激光复合机| www.563515.com-今日福利彩3d图纸| www.9418.wang-彩经网走势图大全搜| www.71zn.com-鸿运五分彩官方开奖| www.209522.com-燕赵福彩网排列5| www.6788.cc-彩票数字规则| www.54697.com-高频彩票北京投注| www.851995.com-特彩吧旧版高手| www.943652.com-大发云61彩票| 500彩票www.50051t.com| www.ga60.com-777彩票团队计划| www.566972.com-一分快三怎么买豹子| www.50299.cc-彩票网站制作哪里| www.35jh.com-最新局王七星彩奖图| www.880394.com-彩票套利方法大全| www.982546.com-福彩选四头奖多少钱| www.gn90.com-广东好彩1怎么买| www.09ue.com-体彩大乐透几点封盘| www.94hx.com-体彩店和外围套利| www.76184.com-足彩单场倍投| www.126741.com-8k彩票是什么意思| www.35jb.com-玩五分彩犯法吗| www.0cq.cc-体彩胜负彩中奖故事| www.376235.com-安徽彩票中心在哪里| www.380002.com-新浪购彩平台登录| www.682089.com-谁有微信足彩群| www.786048.com-体彩大赢家-| www.865705.com-福利彩票加盟费| www.928894.com-中福彩票不能提现| 网易彩票www.177074.com| www.k32.net-3d彩民乐精华版| www.201636.com-广东福彩发行中心| www.mi04.com-青海今天开奖快三| www.260887.com-足彩最新最快开奖| www.1014.org-快开彩开奖直播| www.007090.com-快三三军刷水| www.896684.com-全国快三开奖直播| www.984714.com-动爻算港彩一肖法| www.852991.com-体育彩票怎么开店| www.954292.com-六彩免费彩票大全| www.mc02.com-糖果彩app-| www.28813.cc-网上体彩赌博| www.030891.com-中国福利彩票中奖| www.752839.com-牛彩网3d字迷| www.539834.com-麒麟彩票-| www.956288.com-中国彩票应用| www.572693.com-东盛彩报1版| www.802698.com-北京福彩兑奖流程| www.938823.com-竞彩之家下载| www.cai909.cc-内蒙快三爱彩乐网| www.vq05.com-体彩6十1中奖规则| www.95uw.com-计算器竞彩足| www.848191.com-古建彩绘-| www.cp019.com-彩票神州app| www.a16.xyz-新浪爱彩app| www.zd85.com-彩票分析家app| www.111500.cc-盈彩app-| www.270669.com-神马彩票网站是多少| www.q14.cn-上海福利彩票快彩| www.1376.com-快三大神带我回血| www.71523.com-福彩今天全部图纸| www.36795.cc-幸运28是什么彩票| www.346846.com-吉彩网是正规网站么| www.bg10.com-私彩平台-| www.0kq.com-福星中彩-| www.1945.org-703彩票应用下载| www.316782.com-福彩体彩标志| www.397459.com-随时赚彩票是真是假| www.577574.com-网络买彩票违法吗| www.444105.com-福彩中心判刑| www.002398.com-苏州市体育彩票中心| www.9866.pw-古建彩绘颜料调配| www.fj10.com-贵州彩票开奖| www.04013.com-豪彩vip官方网站| www.069113.com-幸运快三的玩法介绍| www.231750.com-乐彩彩票-| www.411442.com-猫彩绘图片大全| www.519771.com-246天天彩彩票| www.603631.com-彩票818充钱| www.680992.com-好彩下载安装| www.389695.com-双色球彩票开奖时间| www.365518.cc-什么是即开型彩票| www.482990.com-竞彩258彩票投注| www.708912.com-246bc报彩神童| www.923683.com-光大彩票-| www.984091.com-彩之源app-| www.qf61.com-广东福彩好彩一| www.21208.com-神彩争霸2-| www.73975.com-海南彩票源码| 开心彩票www.557595.com| www.699929.com-中国福彩几点开奖| www.803544.com-一号店彩票合法的吗| www.879157.com-新浪福利彩票| www.88142.com-福彩3d丹东图库| www.123495.cc-福彩快三害人的事件| www.229365.cc-成功彩票-| www.421112.com-福利彩票短信指令| www.61121.cc-福彩窝案-| www.2287.pw-送彩票做促销合法吗| www.9120.cn-663299彩霸王| www.315748.com-重庆吋时彩开奖视频| www.163226.com-福彩网兼职是真的吗| www.258970.com-竞彩比分直播老版本| www.532890.com-澳门5分彩是真的吗| www.jj75.com-五亿彩app下载| www.21qv.com-彩票大王吴财军| www.873122.com-彩票九九-| www.80738.com-打彩票好学吗| www.029706.com-彩霸王论坛三肖六码| www.904236.com-星光彩票app完整| www.mt6.cc-内蒙古快三早知道| www.o78.net-送彩票给朋友| www.69707.com-易彩计划软件| www.363904.com-彩虹色的意思是什么| www.939175.com-手机足彩比分直播| www.qq00.com-福彩包括什么| www.1151.cn-凤凰天机六个彩资料| www.951247.com-彩票aqq排行| www.km19.com-竞彩足球比分推荐网| www.18346.com-福利彩票几点关门| www.267988.com-彩乐乐双色球预测| www.987730.com-下载彩乐彩票网| www.984721.com-谁有福利彩的邀请码| www.md73.com-百盈快三官方下载| www.460028.com-招收代玩彩票游戏| www.491605.com-时时彩退水意思| www.579132.com-福彩有人中过吗| www.930328.com-助赢彩票人工计划| www.4685.biz-彩票中50万元| www.22853.cc-13亿彩票-| www.2976.xyz-特区七星彩彩票论坛| www.5352.biz-做梦梦到买彩票中奖| www.17730.cc-足彩258竞彩网| www.326153.com-cb8彩软件-| www.271460.com-广东好彩一怎么玩| www.36va.com-dd彩票安全吗| www.cai1066.com河北快三专家预测| www.21344.com-神彩争霸大发快漏洞| www.9011.vip-乐彩彩票是真的假的| www.77181.com-多彩网官方网站| www.031336.com-天天购彩网骗局揭秘| www.104996.com-彩票追号计划器| www.746198.com-体育彩票自助售彩机| www.020793.com-北京快三走势图查看| www.0575.win-意甲万博博彩| www.972555.com-正版的福利彩票网| 凤凰彩票www.452805.com| www.220418.com-彩运8平是真的吗| www.325790.com-排列三走势彩宝网| www.355999.cc-星光彩票会不会有假| www.539721.com-天津彩民之家app| www.665220.com-近10期七乐彩开奖| www.61642.com-手机乐米彩票下载| www.077308.com-彩色复印机排行| www.564671.com-佛山彩票没人领| www.692233.com-彩乐瀑买不了了| www.96184.com-福彩一等奖领取流程| www.104034.com-中国竞彩奖金计算器| www.190699.com-玩一分快三能赚钱么| www.664110.com-中国福彩电脑版首页| www.739242.com-彩经网彩票杀号定胆| www.812927.com-网易彩票直播首页| www.881596.com-泌县彩英说唱团|