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天

知道了
9彩注册 www.69742.com-辽宁11选5彩票| www.891682.com-快三算法大小单双句| www.968364.com-胜负彩开奖结果查询| www.cp0608.com-彩票破解软件| www.rt07.com-众彩网专家推荐汇总| www.72bb.com-15选5彩票的玩法| www.8350.loan-马来彩三分钟| www.33730.com-37彩票登录-| www.79992.com-足彩开奖结果500| www.881591.com-百胜9b彩票网站| www.17ms.com-奥客彩票手机网| www.245.live-时时彩只玩大小单双| www.035019.com-彩票50倍-| www.7847.pw-数字彩app-| www.766060.com-风彩票-| www.949176.com-快三遗漏数据江苏| www.92or.com-双彩工作室163| www.382445.com-350彩票正规不| www.001618.com-彩吧论坛汇总| www.070373.com-牛彩彩票正规吗| www.133584.com-快三统计软件| www.6801.cm-竞彩足球强胆推荐| 五彩堂www.898418.com| www.6722.space-借用ip玩彩票骗局| www.787912.com-好的足彩网站| www.984379.com-利澳国际彩票下载| www.25ol.com-重庆时时彩稳赚公式| www.906712.com-福利彩票包括什么| www.lh95.com-彩票巴士内部| www.27847.com-上彩票-| www.022592.com-五百万彩票开奖结果| www.878957.cc-49彩票网址手机版| www.540660.com-谁驾着七彩祥云| www.76gk.com-体彩七星彩截止时间| www.487522.com-彩66平台-| www.723256.com-正版彩票指南彩报纸| www.913971.com-智能追号彩票平台| www.cp438.com-有没有正规快三平台| www.j40.com-今晚福彩开奖吗| www.2676.vip-网上正规彩票app| www.285.red-河南商丘民权县彩礼| www.32337.cc-彩色纸箱生产厂家| www.310640.com-彩票趋势系统分析| www.403000.com-福彩杀码大全定胆| www.577029.com-人人中彩票解绑| www.680252.com-易彩会员注册| www.792786.com-异地买彩票怎么兑奖| www.878718.com-广东体彩网首页| www.lm1.com-彩票app排行榜| www.6hx.cc-数学猜想彩票| www.0900.mobi-全民中彩票客户端| www.9522.cc-海南什么私彩天天开| www.89787.com-福彩七乐彩下期预测| www.2471.vip-743好彩网下载| www.gz16.com-盈彩网真的能赚钱么| www.40bg.com-七星彩开奖号码走势| www.0360.in-彩票怎么杀号| www.9013.biz-乐彩垠个人资料| www.9567.in-武汉福彩店铺转让网| www.58101.com-体彩手机购买| www.109710.com-彩票挂机投注软件| www.201591.com-全员彩票开奖查询| www.lb03.com-好彩票手机版| www.29mw.com-自助福利彩票机| www.134.cm-彩虹的约定律动| www.3023.pw-c678cc赢彩网| www.8672.cn-体彩是否有假货| www.14wq.com-博牛彩票怎么提钱| www.572327.com-今天3d天天彩报| www.n16.net-668彩票网站| www.372422.com-胜负彩一等奖多少钱| www.560082.com-体彩排列是5走势图| www.662131.com-竞彩6x6-| www.847300.com-pc国际彩票-| www.910692.com-彩9吧彩票-| www.998939.com-分分彩平台官方下载| www.fa11.com-500彩有挂么| www.yq60.com-易旺彩票彩种| www.107191.com-博彩娱乐导航网址| www.319704.com-快三江苏快三| www.130809.com-蚂蚁彩票可靠吗| www.357908.com-a8彩站是正规的吗| www.083020.com-快三十大秘密| www.020845.com-彩票源码-| www.873330.com-全国彩票开奖号大全| www.025452.com-彩票开奖481| www.133776.com-河南省福彩网开奖| www.797771.com-彩票源码免费下载| www.310.cm-彩票中奖打错了| www.9016.top-下载百度彩票app| www.54188.cc-依彩化妆品怎么样| www.072878.com-哪些彩票中大奖的人| www.339845.com-山西福彩双色球首页| www.38312.cc-福利彩票游戏厅| www.015640.com-七星彩票开奖表| www.126902.com-彩铅人物素描图| www.777627.com-易盈彩票是合法的吗| www.io97.com-五百彩票网官网| www.uv94.com-吉林快三在哪里开奖| www.03444.cc-怎样戒掉高频彩票| www.51849.com-中大奖彩票图片| www.345975.com-爱购彩手机登录| www.413073.com-体育彩票365官网| www.059966.cc-美国彩票开奖时间表| www.0458.cn-体彩手机可以投注吗| www.5553.cn-南京雪中彩影摄影| www.12559.com-复式彩票怎么看中奖| www.55788.com-七乐彩复式机选投注| www.253815.com-华人彩票app下载| www.71513.com-万易彩票app| www.200659.com-手机彩票体彩福彩| www.324792.com-3d彩票字谜-| www.195630.com-买重庆时彩高手心得| www.262619.com-河北快三跨走势图| www.332147.com-彩票头奖的预兆| www.0459.win-福彩双色珠走势图表| www.75272.com-中国有那些彩票合法| www.027913.com-多彩投众筹是否合法| www.12zc.com-万博彩票咋样| www.113684.com-手机彩票软件双色球| www.271455.com-好彩香烟1871| www.363585.com-彩虹色的花完整绘本| www.507474.com-宇宙彩票下载安装| www.180269.com-彩票10分钟开一次| www.356384.com-美国彩票中奖高手| www.828080.com-龙之彩平台-| www.888368.com-51彩票靠谱吗| www.966834.com-彩票大案-| 彩客网www.525059.com| www.478019.com-北京足彩单场怎么玩| www.073998.com-体彩p3杀码技巧| www.530717.com-时时彩永赚不亏方法| www.839256.com-腾讯五分彩软件| www.892665.com-赢家彩票app下载| www.949025.com-中彩快三计划破解| www.984692.com-大乐透杀号彩吧助手| www.ag27.cc-手机彩票网好123| www.wr95.com-好彩官方版苹果下载| www.11uf.com-牛彩赚钱真的假的| www.98ju.com-中国彩票引发的案件| www.2276.in-大乐透彩票中奖规律| www.6550.org-时时彩三胆技巧| www.kl83.com-8k彩票软件-| www.97in.com-博彩之星趋势软件| www.4644.cn-2块钱买彩票中大奖| www.219.mobi-幸运快三好运快三| www.048844.com-时时彩独胆怎么玩| www.160652.com-渔溪体育彩票| www.276599.com-彩票最多反水多少| www.461768.com-福彩图迷专区| www.477487.com-数字三彩神通官网| www.887970.com-彩票推广-| www.950015.com-乐彩论坛免费下载| www.985800.com-福彩3d赵公明预测| www.lw4.com-快三速查表图| www.tg76.com-姜丽花式快三慢动作| www.722349.com-5省快三走势图| www.824739.com-聚丰彩票网站| www.945996.com-美国45秒彩开奖| www.69858.cc-彩运8.首页-| www.65455.cc-双色球走势彩票分析| www.566277.com-名媛汇彩票怎么样| www.984613.com-广东福彩站主之家| www.049461.com-貴州福彩下载|