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.ga20.com-天天中彩票骗局| www.984530.com-福彩3d小小鱼图迷| www.bb48.com-内蒙福彩app| www.uu73.com-3d彩吧论坛天齐网| www.270529.com-500购彩app-| www.319022.com-福彩三d天宇和值迷| www.398928.com-七星彩两期四重号| www.510928.com-带有彩虹的网名| www.584999.com-足球竞彩怎么能赚钱| www.71xq.com-四星彩下期预测| www.4564.top-彩票源码免费分享| www.00857.com-乐彩论坛1手机版| www.961508.com-购彩365-| www.bi67.com-时时中彩票官方网站| www.e45.cn-七乐彩按顺序么| www.748151.com-澳门福彩官方网站| www.861067.com-直播七星彩开奖视频| www.977038.com-有人玩鸿彩快三吗| www.16871.cc-v98彩票有人玩吗| www.85197.com-福彩体彩转让上海| www.064343.com-致富福彩下载| www.49971.com-彩神预测138| www.99950.com-天津好彩-| www.2911.org-彩票店装修效果图| www.9960.cm-中国体彩报订阅| www.60438.com-彩38下载最新版| www.758200.com-高盛彩票可信度| www.850824.com-时时彩假吗-| www.920838.com-彩神真的假的| www.977691.com-澳门世界杯足彩盘口| www.cp6788.com-爱彩乐快3中奖助手| www.nd36.com-彩票开奖11选五| www.t95.cc-时彩族免费计划| www.318759.com-福彩快乐12助手| www.403605.com-七星彩qxc777| www.515795.cc-彩票中奖官司| www.827068.com-珠江彩票幸运飞艇| www.914926.com-彩票破解版-| www.981606.com-福彩主任如何作假| www.pb46.com-河北体育彩票选5| www.03xd.com-体彩开机号码今天| www.76ia.com-宏盛彩票登录| www.gs96.com-大掌柜彩票app| www.4239.cm-七彩汇app-| www.913956.com-福彩三百期走势图| www.892142.com-福彩快乐彩22选1| www.cp5766.com-白岩松说彩票太假| www.lj88.com-爱彩彩票下载| www.4vv.cc-玩分分彩心态| www.63vf.com-彩票研究方法的博客| www.2848.cm-七星彩中奖地区| www.399001.com-七星彩特区论坛精选| www.590563.com-七星彩接单图片大全| www.764405.com-505彩票注册彩金| www.0953.date-彩票走势图南方网| www.8610.shop-百宝彩视注册| www.274590.com-重庆时时彩最新规则| www.fm36.com-快三群里的假土豪| www.855064.com-微讯彩票app| www.348352.com-手机买彩票那个好| www.481989.com-大乐透彩票兑换期限| www.588336.com-球彩台阿健-| www.680808.com-内蒙中福快三| www.106322.com-彩788导航-| www.206942.com-帮忙投注彩票骗局| www.309918.com-湖北省福彩中心| www.386708.com-亚洲杯足彩-| www.773507.com-365彩票提现| www.888839.com-体彩店合伙人协议| www.979903.com-广西体彩手机投注| www.28wj.com-福彩3d绕胆图| www.028084.com-彩票系统开发| www.100360.com-福彩3α论坛| www.88gr.com-网络黑彩漏洞| www.7293.biz-e彩虹直播-| www.698430.com-hk百彩网免费大全| www.678436.com-足彩完整比分直播| www.779373.com-菠萝彩论坛手机版| www.137496.com-中国足彩网竞彩足球| www.558030.com-星濠彩票游戏城| www.686805.com-苏州快三计算公式| www.799898.com-彩票查询排列三| www.906108.com-竞彩分析预测| www.398465.com-厚街东彩印刷怎么样| www.551427.com-新浪足彩佬牛| www.770485.com-重庆时时彩老后局| www.38965.cc-旺彩双色球预测| www.167293.com-北京快三和值| www.448010.com-汇彩网怎么注册| www.980728.com-投资彩票店-| www.864239.com-最新彩票123| www.930195.com-竞彩篮球让球玩法| www.977622.com-彩色纸盒印刷| 500彩票www.904854.com| www.06238.com-6701彩票网站| www.208382.com-今晚湖北快三开奖号| www.42824.com-领彩金-| www.041037.com-乐发彩票网-| www.144356.com-足球竞彩数据app| www.218600.com-内蒙古快三害死人| www.606198.com-意大利快三开奖结果| www.681082.com-怎么能戒掉买彩票| www.761112.com-258竞彩彩票| www.874483.com-老谢说彩19026| www.931104.com-色彩构成-| www.976267.com-红彩会hch555| 亿发彩票www.901370.com| www.36qo.com-购彩投注-| www.t14.shop-桐梓彩民中奖| www.73rz.com-白羊座今日彩票运势| www.998630.com-足彩预测软件排行榜| www.095030.com-彩吧论坛首页天气网| www.654719.com-七星彩心灵码仙今天| www.756623.com-全民中彩恢复了没| www.843977.com-福彩与慈善的含义| www.929346.com-安徽各地市体彩中心| www.985211.com-728彩票线路| www.ti5.com-南昌快三开奖号| www.997873.com-乐彩乐彩网-| www.642883.com-彩票中奖多久能拿| www.727666.com-彩霸王心水论淡| www.t95.club-海南七星私彩网站| www.73kv.com-三分彩怎么看走势图| www.i18.org-今日体彩票开奖结果| www.40tf.com-07彩票app-| www.97xt.com-破解黑彩app| www.96re.com-如何买彩票中大奖| www.3938.top-竞彩足球半全场平胜| www.27759.com-w彩22956注册| www.93197.cc-北京快三如何选好| www.071208.com-彩票店转让手续| www.411131.com-唯彩看球完整版官方| www.506155.com-天牛彩票第二版| www.568343.com-东北七彩快三开奖| www.623596.com-刮刮福利彩票规则| www.92283.cc-七乐彩怎么买中奖高| www.114073.com-福彩三地和值谜| www.763167.com-彩票亿元大奖规律| www.92393.com-立彩充值-| www.896226.com-体彩天下靠谱吗| www.984744.com-福彩双色球选号公式| www.mh4.cc-内蒙快三热点早知道| www.su92.com-体彩7星彩开奖时间| www.5zc.com-漫威dc本子全彩| www.77925.com-智慧彩软件破解版| www.27682.com-福彩体彩家彩网排了| www.99894.com-金福彩票app| www.902395.com-福彩3d玩黑彩方法| www.906522.com-福彩一分快三网址| www.970171.com-体彩群名-| 8618彩票www.hh8618.com| www.54681.com-彩票按其特点分为| www.075363.com-七乐彩除6走势图| www.204109.com-体育彩票大乐透开奖| www.387443.com-钢化彩膜怎么贴| www.369450.com-福建体彩泉州乐聊天| www.446954.com-今晚竞彩比赛直播| www.539334.com-人人中彩票倒闭了| www.270.in-彩票店接受微信投注| www.08977.cc-福彩3d胆码论坛| www.582162.com-彩票停止销售时间| www.648065.com-吉林快三单码算法| www.700061.com-五百彩票网股票雪球| www.760510.com-加拿大五分彩是正规|