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.726100.com-彩神v8是骗局吗| www.800179.com-投注快三-| www.935345.com-红旗彩票平台| 幸运彩票www.73166k.com| www.mt69.com-福利彩票排列五| www.347883.com-福彩双色球奖金计算| www.680937.com-白岩松彩票太假| www.799679.com-快三最高中奖纪录| www.981330.com-竞彩表格制作| www.dd08.com-三分快三计划稳定| www.125.org-哪个平台可以买体彩| www.9174.cn-秒速时时采彩外挂| www.29725.cc-彩票年后几号开始| www.mf73.com-牛蛙彩票资料| www.824244.com-七星彩买奖网址| www.930522.com-彩90彩票下载安装| 中国福利彩票www.6364s.com| www.hu19.com-全民快三是真是假| www.237949.com-彩票福彩开奖查询| www.400697.com-七星彩正版图纸| www.533207.com-福彩三d关注码金码| www.613588.com-qq群购彩-| www.715723.com-百乐盈彩票-| www.1801.vip-135彩票平台| www.401320.com-七星彩一二位差值| www.544264.com-怎样才能中彩票呢| www.626173.com-祥金祥彩票登录| www.717145.com-彩铅怎么水溶| www.799744.com-彩票的中奖号码查询| www.899440.com-大乐透彩神通| www.966210.com-发彩网是正规平台吗| www.nr66.com-京东彩票诈骗| www.754052.com-3d彩票几点停售| www.19vc.com-智慧彩打不开咋回事| www.81fi.com-快乐彩五行如何盈利| www.345946.com-爱购彩旧版-| www.fm4.com-今天安徽福彩快三| www.69479.com-98彩票网站靠谱吗| www.fs5.com-彩票预测网-| www.wl67.com-体彩票开奖查询结果| www.56623.cc-91彩票计划网站| www.558363.cc-初中彩铅画-| www.659531.com-全民彩足-| www.709216.com-澳大利亚彩票怎么买| www.862496.com-福彩双色球怎么玩| www.966634.com-腾讯五分彩玩法介绍| www.qo55.com-易彩快三可靠吗| www.281387.com-五星彩票开奖结果| www.381396.com-廖彩杏-| www.73717.cc-极速彩票导航| www.155518.com-时时彩最赚钱方法| www.272121.com-福彩快3手机版下载| www.349357.com-彩天下平台怎么样| www.437907.com-易彩电脑版-| www.528690.com-浙江体彩31选7| www.6207.cn-福利彩票特别号到几| www.846993.com-今天体彩排列五奖号| www.953347.com-竞彩篮球开奖公告| 网易彩票www.36788q.com| www.6219.cm-彩皇网彩票预测| www.23832.cc-481彩票开奖结果| www.467357.com-七乐彩的中奖| www.582566.com-体彩屋网址-| www.181181.cc-今日中彩下载| www.32iq.com-87彩票金钱豹| www.110281.com-鸿运彩票网计划| www.062815.com-现在哪里可以买彩票| www.ty86.com-竞彩足球理论上稳赚| www.35ub.com-体彩大乐透历史数据| www.596789.com-玩快彩真的能赚钱吗| www.dc19.com-4亿彩票官网| www.940658.com-买内蒙快三-| www.iw00.com-体彩主任-| www.836039.com-彩票中奖了怎么办| www.05053.com-老凤祥彩金调换规则| www.15rp.com-离婚彩礼和嫁妆问题| www.0081.org-福彩3b各类和值谜| www.7776.in-彩霸王高手坛| www.0971.org-合买中心信嘉彩票| www.13898.cc-竞彩网是正规网站吗| www.019760.com-中国福利彩票店加盟| www.131156.com-2019年江西彩礼| www.261565.com-大彩鲸快三助手| www.250180.com-中国购彩网下载| www.778331.com-360彩票预测网| www.994194.com-快彩电子走势图电视| www.hq64.cc-3d彩票技巧-| www.740740.cc-澳彩與歐賠-| www.872715.com-时时彩最新开奖号码| www.961343.com-官方彩31-| www.ge32.com-福建省福彩快三玩法| www.238160.com-中国福彩网彩种| www.li21.com-今日彩是不是真的| www.974768.com-彩票新闻中奖农民工| www.ac00.com-彩票开奖结果彩宝贝| www.352629.com-开台湾福星彩现场| www.34388.cc-订购彩票手机报| www.562121.com-福彩3d布衣图库| www.49ym.com-官方福彩中心| www.610635.com-如何用彩铅画星空| www.716362.com-够力七星彩奖表| www.853642.com-天津市福利彩票中心| www.974271.com-环球彩票注册网址| www.16876.cc-v98彩票官网| www.536901.com-彩字打一生肖| www.625810.com-鑫彩国际游戏| www.692230.com-瑞诚彩票合买平台| www.ft02.com-百盈快三有没有技巧| www.00482.com-体肓彩票试机号| www.816215.com-统一彩票-| www.892026.com-竞彩足球彩票预测| www.964384.com-体彩app停售多久| www.069935.com-彩神争霸正规吗| www.183073.com-大发快三走势图官网| www.281550.com-时时彩拉手-| www.843716.com-阳光福彩公益彩票| www.078983.com-七星彩号码公式| www.130144.com-网上哪里还能买福彩| www.229090.com-河南快三新玩法介绍| www.185143.com-3d福彩今日新鲜事| www.249993.com-体彩自助-| www.309658.com-体彩七位数选号技巧| www.cp98.cc-多乐多乐彩走势图| www.912796.com-丹麦快乐彩官网| www.995666.cc-竞彩足彩必胜公式| www.js44.cc-台北快三一分钟一期| www.362333.com-体育彩票今天开奖| www.974274.com-七乐彩41多少钱| www.293673.com-彩票平台哪些赔率高| www.4845.cn-临汾市福彩中心| www.75705.com-体彩彩帮-| www.590352.com-七星彩接单图片| www.02144.com-河内五分彩机器人| www.365356.cc-手机快三的案件| www.478625.com-深圳彩票开奖| www.065578.com-彩铅画星空图片| www.175793.com-手机购彩软件| www.4355.cn-陇南市体彩中心地址| www.04187.com-彩票怎么电话投注| www.088175.com-重庆福利彩票中心| www.174746.com-最新福彩快3助手| www.264354.com-360彩票下载| www.27798.com-3cp官方彩票| www.032600.com-香港彩宝典-| www.323991.com-国乐彩网站-| www.124002.com-凤凰彩票有没有漏洞| www.193137.com-吉林快三和值走| www.3422.in-好彩酒楼江北店简介| www.105772.com-彩票大赢家缩水软件| www.220245.com-彩票首充10送28| www.288820.cc-体彩名词灯谜| www.343568.com-彩票能挣钱的软件| www.637902.com-七星彩排列五表| 易彩网www.12455t.com| www.v19.pw-宝乐彩票靠谱吗| www.814069.com-高频彩改开奖时间| www.886676.com-福利彩票奖金分配表| www.951646.com-彩票平台租赁| www.992640.com-足球博彩高手心得| www.im6.cc-内蒙古新快三| www.69ae.com-七彩字体下载| www.985819.com-福彩3天中图库杀码| www.020829.com-大厅彩票源码| www.143672.com-竞彩网足球计算器|