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天

知道了
亚洲28 www.056885.com-七星彩梦大奖| www.34030.com-怎样买彩票稳赢| www.024538.com-体彩组三玩法| www.436860.com-手机上如何买彩票| www.631960.com-收米竞彩官网| www.792908.com-蚂蚁积分换彩票没了| www.992298.com-百胜快三好不好| www.f99.top-彩票统计遗漏| www.608239.com-彩票派彩什么意思| www.09474.com-彩29网站下载| www.po46.com-大发快三破解器开挂| www.063577.com-福彩体彩加盟费多少| www.178351.com-戒彩票吧-| www.251527.com-中彩软件下载| www.338408.com-银联支付彩票| www.j96.cn-思乐彩票助手| www.083192.com-彩票60分-| www.122026.com-体育彩票双色球作弊| www.352036.com-竞彩连黑-| www.506518.com-买彩票的秘诀| www.613253.com-u9彩极速6合| www.926708.com-彩票达人论坛| www.bq77.com-幸运时时彩计划网| www.hi30.com-湖北快三计划软件| www.710035.com-微信美女带你玩福彩| www.860996.com-广东好彩1最新开奖| www.992819.com-福利彩票色子敲门| www.ob10.com-彩票查询开奖结果| www.79kd.com-中彩冈3d推荐号| www.388.com-安徽体彩开奖号码| www.5586.cm-体彩广东-| www.968569.com-中乐彩75秒-| www.959556.com-134彩票-| www.fu49.com-谁有微信彩票群| www.253397.com-好彩妹嫁给谁| www.825382.com-竞彩猫有用吗| www.981489.com-神算彩票专家| www.r53.cc-可以提现的彩票网| www.40015.com-彩票上写字能兑奖吗| www.816568.com-快三多长时间开一次| 鑫彩网www.xcw866.com| www.030999.com-彩票改vr-| www.195660.com-体彩排列五开奖直播| www.cp2277.cc-百盈快三的规律| www.18108.cc-足球彩票兑奖计算器| 9928彩票www.9928g.com| www.381646.com-体彩中了三个亿| www.48522.com-足彩滚球在哪买| www.681117.com-怎样才能戒掉买彩票| 中国福利彩票www.08588y.com| www.577345.com-福彩三d速查表| www.703979.com-639彩票-| www.962459.com-福彩1360亿真假| 大赢家彩票平台www.520691.com| www.036365.com-今日彩票软件下载| www.p49.com-有没有玩滴滴彩票的| www.88gr.com-网络黑彩漏洞| www.802022.com-福彩开奖记录表| www.560888.com-l7500乐彩网| www.626611.com-彩名彩票app| www.706050.com-短信特邀彩金网站| www.792263.com-杭州福彩中心兑奖| www.882413.com-易彩堂是真的吗| www.968464.com-鲍彩票-| www.cp78.com-体彩快3开奖结果| www.409961.com-鸿发彩票帮投| www.961785.com-福彩快三开奖时间改| www.ft49.com-福彩7+2多少钱| www.151473.com-下载时时彩-| www.033630.com-竞彩彩店宝app| www.117693.com-竞彩直播吧-| www.166409.com-湖北精彩十分走势图| www.018835.com-网上买时时彩靠谱吗| www.092881.com-快三害人吗-| www.081301.com-双色球彩票必中咒语| www.199972.com-安徽体彩网-| www.553292.com-竞彩足球5全包| www.39679.cc-搜索百乐彩| www.240314.com-17500彩票论坛| www.340509.com-大乐透专家众彩网| www.455885.com-乐彩彩票网登录| www.548099.com-彩票api安装| www.223333.cc-97彩票下载手机版| www.323176.com-七彩彩票开奖号码| www.469055.com-时时彩专家推荐号| www.450064.com-彩象彩票-| www.391672.com-印尼时时彩官网开奖| www.550676.com-福利彩票购彩平台| www.875177.com-澳门时时彩是骗局吗| www.s89.space-新彩网字谜汇总| www.24443.cc-湖北百宝彩下载| www.014210.com-七星彩图库图片| www.891410.com-免费彩计划-| www.985237.com-竞彩单场保本对冲| www.8275.org-中国彩票销量下滑| www.99xs.com-体彩11选遗漏| www.16405.com-3d福彩怎么玩法| www.7366.com-体彩晚秋字谜汇总| www.52257.com-辽宁体彩网唯一指定| www.206610.com-内蒙古快三中奖绝招| www.rx86.com-稳赚高频快三娱乐| www.51205.com-58彩票安卓版谁有| www.381754.com-彩票平推是什么意思| www.38331.com-台湾5分彩正规吗| www.306052.com-手机彩票注册送礼金| www.375418.com-中央几频道开七星彩| www.017589.com-秒速时时彩开奖网站| www.18975.cc-3d彩票查询-| www.62313.cc-时时彩有赢家吗| www.010382.com-河北福彩5开奖结果| www.629992.com-福彩数字3中奖| www.215104.com-彩票平台代理| www.283806.com-哪种彩票比较好| www.344420.com-今晚福彩票中奖现场| www.399889.com-彩票分析家官网| www.540034.com-休闲快三第三套分解| www.339629.com-山西省中国福利彩票| www.413529.com-天天好彩生肖号码表| www.904067.com-江苏省福彩网| www.965791.com-福彩中心3d试机号| 杏彩www.00840h.com| www.594138.com-彩票分析选号软件| www.778310.com-彩贝壳官网电话| www.882643.com-易彩网多少钱能提现| www.962423.com-福利彩票随机选的| www.cai0233.com青海快三走势图今天| www.2547.vip-彩票代打qq群| www.787276.com-七星彩今晚开奖头尾| www.895080.com-天下彩票藏宝阁| www.970930.com-3d字谜中彩网| www.cai9797.com兰州快三彩票| www.tb63.com-浙江福彩3d-| www.56ak.com-彩之源是真还是假| www.0040.vip-福彩任四胆拖玩法| www.6101.vip-骨瓷釉上彩有毒吗| www.358420.com-时时彩建站教程| www.281927.com-双色彩票指南电子版| www.144559.com-足彩妖刀最新推荐| www.257606.com-家彩开奖-| www.626932.com-038彩票开户| www.722232.com-时时彩刷流水方法| www.821551.com-七星彩图-| www.926868.com-红旗彩票合法么| www.999664.cc-福彩排列五开奖规则| www.73xd.com-福彩3b天气网| www.078034.com-中福彩票黑平台| www.543500.com-有什么好的彩票网站| www.668941.com-美国乐透彩票怎么买| www.783330.com-保定体彩中奖| www.941136.com-中国体彩票排列五| www.dc36.com-彩票365下载安装| www.134708.com-好彩香烟铁盒| www.3864.com-南国七星彩论坛规| www.10461.com-盛彩彩票官方网站| www.168475.com-北京福彩快三开奖号| www.80320.com-体彩3d全部号码| www.264893.com-福彩3d破解秘籍| www.370304.com-时时彩有合法| www.pi48.com-十四场胜负彩| www.422848.com-足球彩票推广哪家好| www.cp7890.com-彩票查询-| www.156389.com-三分彩计划软件下载| www.276208.com-七星彩复式投8| www.367697.cc-彩铅古风手绘图片|