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天

知道了
58福彩 www.708023.com-西甲竞彩预测| www.458108.com-彩票走势图如何看| www.370356.com-黑彩代理返点犯法么| www.515599.com-彩票中奖打错了| www.596507.com-今日头彩软件| www.707538.com-南充市福彩网| www.07pd.com-体育彩票大乐中奖| www.920043.com-今天的中奖彩票号码| www.au67.com-彩神ll8-| www.41jz.cc-中国体彩票大乐透| www.9204.xyz-在手机上怎么买体彩| www.82eq.com-南昌体育彩票兑奖| www.891579.com-彩票统计数据| www.980548.com-968彩票可不可信| www.ex84.com-彩票助赢软件网页版| www.081665.com-彩票数字范围| www.884061.com-乐彩网10-| 快彩在线www.2632y.com| www.56wx.cc-张家口福彩兑奖处| www.737337.com-福彩3d在哪买| www.12829.com-周二篮球竞彩结果| www.78556.cc-彩票高频走势| www.k22.top-双色球彩票指南| www.967.tv-杏彩网页版登录| www.251397.com-安徽福彩3d快3| www.619556.com-竞彩冷门-| www.124280.com-福彩三d试机号分析| www.516668.cc-彩票守号容易中奖| www.872751.com-贵阳体彩申请| 易旺彩票www.yw344.com| www.584562.com-捕鱼送彩金能退钱| www.659603.com-福利彩票双色球群| www.751412.com-福彩3d网聋哑人| www.826653.com-穷人彩票中大奖| www.900863.com-福彩三地小军三版| www.970143.com-台湾乐透彩开奖查询| 500彩票网www.897060.com| www.5967.biz-优中彩票正规吗| www.714260.com-时时彩组三稳赚方法| www.802208.com-云南福利彩票网站| www.zp86.com-福彩票24号-| www.1339.cc-彩票试机号今天| www.776508.com-重庆时时彩五星玩法| www.879589.com-1288购彩网-| www.288411.com-快三注册网站| www.70007.cc-彩虹8彩票网址| www.553388.com-时时彩25期反长龙| www.423363.com-乐彩33网骗人的吗| www.238781.com-彩票漏洞赚钱| www.890394.cc-快三开奖结果牛| www.999904.com-福彩排列五玩法介绍| www.jc75.com-779彩票官网| www.0111.website彩色是颜色词语吗| www.457459.com-七星彩赔率-| www.41007.com-唯彩彩票-| www.060546.com-开体彩店利润怎么样| www.158906.com-陕西快三走势图| www.239822.com-王者彩票诈骗| www.320397.com-快三客户端-| www.427263.com-玩时彩把赢的钱输了| www.539617.com-时时彩几点开始投| www.807912.com-数字彩票预测法| www.911971.com-私彩软件违法吗| www.996994.com-安微福彩快三走势图| www.kg46.com-广西福彩app| www.661062.com-台北快三下载安装| www.638304.com-色彩风景画临摹图片| www.397743.com-足球竞彩88-| www.603627.com-全民汇彩票一彩种| www.260305.com-胜彩网站-| www.343838.com-学生买彩票-| www.121372.com-百合娱乐手机彩票| 大赢家彩票平台www.791397.com| www.983842.com-福利彩票领奖| www.397915.com-七星彩开咪奖| www.535269.com-12生肖彩票资料| www.704444.cc-黑彩大小双单| www.8122.org-众彩几点开门| www.20fs.com-北镇彩票中大奖了吗| www.923086.com-彩色透水混凝土路面| www.124292.com-河北快三开奖时间表| www.698975.com-谁有华夏彩票邀请码| www.890528.com-坤彩科技股票吧| 亿彩彩票www.yic9.com| www.ex60.com-湖北一定牛彩票| www.xj51.com-彩票计划9cb下载| www.58pm.com-那些欠钱中了彩票| www.9021.vip-如果彩票中了一千万| www.53993.cc-彩票牌子-| www.093061.com-彩色混凝土路面工艺| www.788769.com-山西太原结婚彩礼| www.108267.com-精彩彩票是真的吗| www.610129.com-七星彩预测汇总| www.923362.com-彩票站晚上几点关门| www.70344.com-7天彩票官方网站| www.155137.com-竞彩足球官网下载| www.256160.com-中彩网福彩-| www.74362.com-福彩双色球玩法预测| www.046807.com-聚彩彩票app| www.131331.com-昆明彩票中奖| www.236101.com-烟台福彩网-| www.006986.com-中原风彩-| www.88845.cc-246好彩票下载| www.230251.com-彩16苹果下载地址| www.381496.com-彩票礼拜五开什么奖| www.871969.com-七星彩31期-| 亚洲www.139733.com| www.2744.in-福彩快三倍数平台| www.34134.com-福彩三地谜语总汇| www.89462.com-购彩平台元角分| www.072616.com-三个骰子彩票叫什么| www.592550.com-南方双彩缩水软件| www.706147.com-大红鹰彩票网欢迎你| www.822626.com-福利彩票追加| www.948266.com-快乐彩玩法说明| www.ll0.cc-彩票导师-| www.208938.com-快彩乐官网-| www.299817.com-凤凰彩票输掉了几万| www.670715.com-福彩幸运农场追号| www.874381.com-福彩76期开奖号码| www.38776.cc-大富豪彩票下载中心| www.989990.com-彩票是啥-| www.jh93.com-彩票的托是怎么样的| www.6538.in-彩票中坎龙是什么| www.323468.com-七乐彩在线机选投注| www.007645.com-k彩彩民福彩| www.998023.com-七星彩彩版高速下载| www.gc55.com-欢乐国际彩票骗局| www.267312.com-胜负彩19045| www.356053.com-腾讯分分彩可靠平台| www.035958.com-彩天下坑人真相| www.137302.com-彩霸王三星做号软件| www.78616.cc-福彩主任王素英微信| www.7418.xyz-安庆体彩竞彩网点图| www.ow62.com-网上赌快三-| www.36ea.com-中国福彩最大中奖| www.835113.com-好彩绿好抽吗| www.060262.com-彩53平台-| www.25859.cc-安徽快三期开奖| www.108862.com-新濠彩票平台安全吗| www.226019.com-福建福利彩票官方网| www.303003.com-香港马会澳彩对比| www.vd39.com-河南省体彩网| www.us43.com-苹果彩票网-| www.697247.com-体育彩票几点开奖| www.813233.com-微信上玩彩票的女孩| www.880192.com-福彩家彩网专家杀码| www.960817.com-起点彩票-| www.cai8299.com彩票开奖结果查绚| www.wd72.com-沈阳快三是官方的吗| www.301944.com-南国体彩七星彩论坛| www.78193.com-福利快三有什么规律| www.842018.com-聚鑫彩票网站| www.05200.com-彩一票开奖大厅| www.691712.com-万彩吧3d论坛| www.878971.cc-快三街机游戏大全| www.29te.com-天津体彩十分| www.3989.biz-河南福彩中大奖| www.87ne.com-天猫彩票游戏| www.655599.com-玩时时彩违法吗| www.714260.com-时时彩组三稳赚方法| www.789008.com-竞彩必发交易| www.861511.com-乐彩app下载| www.14143.cc-竞彩足球胜平负混合|