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天

知道了
1分快三 www.363711.com-彩民堂客户端下载| www.545131.com-爱乐透彩票手机版| www.622901.com-幸运飞碟彩票| www.716362.com-够力七星彩奖表| www.814199.com-中园福利彩票双色球| www.913738.com-万彩网正规吗| www.551.cm-pp彩票官网下载| www.6335.cm-福利彩票开奖70| www.bh05.com-彩票兼职骗局| www.615008.com-福彩快乐8玩法介绍| www.714398.com-500轻聊彩票吗| www.8458.top-什么是融彩网| www.040693.com-博彩有什么推广方案| www.126493.com-18167期胜负彩| www.980068.com-买彩票怎么看中奖了| www.eq51.com-互联网销售彩票行为| www.g87.club-彩宝网是真的假的| www.757030.com-福彩6加1走势坉| www.840094.com-体育竞彩外围| www.939628.com-彩票网首页-| 凤凰彩票www.77801c.com| www.nl18.com-足彩分析推荐| www.21ve.com-状元彩票网平台| www.381811.com-肥城买彩票中三个亿| www.08dt.com-港彩直播开奖现场| www.85743.com-彩铝板-| www.66612.cc-三分时时彩开奖查询| www.815153.cc-福彩3d今日号码| www.025217.com-江西快三奖号走势图| www.152295.com-立彩助手苹果下不了| www.686206.com-澳门彩票公司简介| www.869064.com-彩民在线频道山东| www.pm25.com-随州福彩社区论坛| www.575.org-51+com彩虹-| www.495273.com-什么牌子的彩漂好用| www.662831.com-众彩网首页登录入口| www.579565.com-18102彩票-| www.159090.com-外国彩票分析| www.619793.com-汪先生的金口诀测彩| www.208828.com-福利彩票查询今天| www.385871.com-台湾5分彩走势| www.852225.com-重庆分分彩是真的吗| www.917776.com-彩虹代刷网主站| www.975371.com-505彩票合法吗| www.jd93.com-彩票双色球随机选号| www.m33.com-手机彩膜代理| www.292476.com-时时彩组六单式号码| www.295885.com-彩票开奖信息查询| www.13el.com-足球彩票倍数怎么算| www.865457.com-重庆分分彩开奖记录| www.965254.com-tkcc彩天空-| 彩69www.069961.com| www.hw33.com-浙江体育彩票大乐透| www.c28.club-欧洲杯彩票怎么买| www.5355.hk-手机上玩彩票违法吗| www.0782.vip-足彩在哪个软件购买| www.819153.com-买彩票几百万| www.562985.com-三位数体彩-| www.637968.com-色彩构成作业| www.770485.com-重庆时时彩老后局| www.876616.cc-上海市d彩票| www.948899.com-福彩内部qq号骗局| www.997904.com-福彩3d乐彩首页| www.fj64.com-福彩3d湖北网| www.613559.com-天福彩票图片| www.722497.com-怎么刷秒秒彩| www.056063.com-彩票大本营生肖表| www.096260.com-福利彩票的发行宗旨| www.316952.com-900万彩票app| www.384577.com-网上玩时时彩犯法吗| www.481118.com-和彩印语录-| www.555915.com-彩票经销商回扣| www.619167.com-山东彩票开奖详情| www.680081.com-二元彩票网-| www.33837.cc-七乐彩一等奖| www.a24.site-新彩心得-| www.45iq.com-彩虹儿童画怎么画| www.0512.net-什么博彩平台信誉好| www.717934.com-巨彩led显示屏| www.43096.com-彩票双色球几点开奖| www.017943.com-彩票投注计算器胆拖| www.77233.com-彩票中奖率多少| www.54ib.com-药精彩采购平台| www.212409.com-福彩淘宝-| www.360942.com-彩票交多少税公式| www.352817.com-手机黑彩怎么报警| www.762667.com-中国福彩网打不开| www.680183.com-福彩可以网络投注吗| www.777856.com-彩票漏洞软件| www.868557.com-快彩乐遗漏-| www.936637.com-无人售彩票机代理| www.985332.com-竞彩足球足彩| www.cp3958.com-大发快三软件破解器| www.05kj.cc-体彩排列三两码遗漏| www.95vg.com-泰国彩票开奖结果| www.886955.com-大快三下载安装| www.992337.com-310足彩推荐| www.zc1.com-河南福彩3d-| 新盈彩www.xinyc1.com| www.978555.com-福彩3d彩图丹东版| www.105068.com-华人彩官方登录| www.254715.com-甘肃快三技巧与规律| www.374488.com-体彩票排五开奖查询| www.731441.com-易彩堂一主页| www.873534.com-天空彩票正版料| www.41mm.com-万福彩票官网| www.889.mobi-彩九九iphone| www.097617.com-体彩公益金分配比例| www.662010.com-金全球额最大的彩票| www.66826.com-快三数据专家触屏版| www.952831.com-浙江体彩大乐透开奖| www.cai9466.com湖北今天快三开奖| www.953.red-福彩三d定位诗今天| www.840522.com-福彩刷流水挣钱吗| www.915308.com-网上买彩票赌博报警| www.980332.com-大彩鲸快三助手下载| www.ct33.com-快三开奖上海快三| www.539665.com-彩虹的约定钢琴简谱| www.763725.com-神计划人工时时彩| www.204.cm-素描彩铅画图片卡通| www.521309.com-手机时时彩预测器| www.585106.com-北京一分钟赛车彩票| www.90dr.com-谁能做博彩平台| www.900025.cc-天天中奖彩票合法吗| www.965586.com-竞彩5oo-| 尊彩www.083015.com| www.9883.biz-福利彩票快乐彩查询| www.nk84.com-彩票虚拟投注软件| www.go3.com-快三跨度怎么看| www.ri38.com-七星彩复式价格表| www.23pz.cc-官方的彩票软件下载| www.53mh.cc-彩合开奖-| www.0816.live-互联网彩票重启时间| www.7479.me-天天悦彩骗局| www.13279.cc-足彩投注比例查询| www.348566.com-大发快3彩乐网| www.761246.com-好彩票怎么下| www.952268.com-七星彩开奖一结果查| 818合彩www.www.9889hc.com| www.mj04.com-重庆事实彩开奖结果| www.462422.com-排三彩票专家| www.1808.biz-体育彩票直选| www.3282.in-福彩购彩投注| www.502381.com-kk彩票上的导师| www.112884.com-上海快三定牛| www.729119.com-福彩网址大全| www.794689.cc-网络快三彩票赌博| www.852003.com-福利彩票可糊弄人| www.895696.com-永诚彩票网官方网址| www.952457.com-广东福利彩票好彩2| www.995047.com-五百万彩票网址| www.04js.com-彩富天下-| www.947220.com-天天中彩票靠谱吗| www.995726.com-足彩买胜负怎么样| www.dk7.cc-快三高手-| www.61oa.com-腐彩福彩-| www.155300.com-足彩胜平负玩法说明| www.52qy.com-高频彩调整新闻| www.nq98.com-时时彩做号专用工具| www.800390.com-新3d福彩吧-| www.of71.com-北京新快三走势图| www.382692.com-无锡彩旸-| www.559990.com-哪里的彩票合买系统| www.682702.com-时时中彩票登录平台|