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.821979.com-福彩2d技巧-| www.963505.com-福彩代购app| 500万彩票www.936570.com| www.ps21.com-丹麦快乐彩开奖号码| www.57at.com-北京五分彩彩官网| www.1171.cn-足彩宣传-| www.09493.com-鸿鼎彩票网站app| www.59638.com-海南彩票规律讲解| www.035554.com-手机彩票试玩| www.131578.com-近期彩票无人领| www.219851.com-大发快三人工计划网| www.303777.com-鑫彩国际是什么| www.384944.com-七星彩七金码版| www.551181.com-万豪彩票助手下载| www.648198.com-斯蒂芬彩票公式| www.745920.com-彩票就玩大彩网| www.828295.com-时时彩免费软件| www.896886.com-快乐双彩综合走势图| www.964720.com-时时彩技巧出号规律| 大赢家彩票www.543411.com| www.kf78.com-手机买彩票真实吗| www.m94.net-体育彩票最大奖| www.55ej.com-七分彩下载-| www.0619.vip-麒麟竞彩-| www.9931.top-福利彩票图谜汇总| www.58445.cc-8彩票网址-| www.023384.com-可以买体彩的软件| www.104629.com-牛5彩票-| www.180398.com-甘肃快三开奖结果| www.259055.com-足彩妖刀-| www.337319.com-湖北快三未开号码| www.434358.com-福彩销售员-| www.539794.com-彩票和值是什么意思| www.693243.com-新浪网福彩3d预测| www.779148.com-大众彩票网官网| www.862323.com-福彩那几天开奖| www.934526.com-五分彩全天精准计划| www.993460.com-注册彩票送彩金| www.kt1.cc-北京体彩快十一选五| www.rf05.com-分分彩假-| www.14ia.com-中国体育彩票任选9| www.175.live-优秀彩铅教师范画| www.079286.com-星彩科技-| www.171012.com-河北福彩快3| www.421587.com-体彩竞彩世界杯查询| www.540003.com-福彩3d限号-| www.633542.com-0707彩票-| www.711007.cc-购买足球彩票软件| www.785049.com-乐优炫彩-| www.855560.com-林兴洛福彩3d| www.914464.com-瑞彩祥云钻石邀请码| www.973804.com-新2彩票软件| www.o52.net-彩票中的数学| www.50yt.com-河南褔彩快3| www.0268.org-海南时时彩私彩| www.8118.cm-葡萄京彩票-| www.32577.cc-春秋彩票平台| www.78139.com-3d彩票技术培训| www.031980.com-阿里彩票受骗| www.112083.com-98时时彩平台| www.185174.com-马云买了26年彩票| www.262019.com-大发快三输了十几万| www.423803.com-星彩和刘禅-| www.526991.com-彩神x登陆-| www.626736.com-663彩票-| www.699602.com-福彩3d太福字谜| www.779425.com-中彩易是真的吗| www.859940.com-福彩3d带线走势图| www.927438.com-韩国快三助手下载| www.984287.com-微信拉人玩高频彩| www.kw44.com-免费彩票共享大全| www.i01.org-福彩七乐彩几个中奖| www.42bm.com-彩票免密充值平台| www.553.red-彩富网手机最快报码| www.4551.biz-网上咋注册买彩票| www.9969.top-七星彩排列五下载| www.80066.com-高频彩票未来趋势| www.032890.com-谁有福彩网邀请码| www.110656.com-福利彩票多久一期| www.180343.com-彩票查询快3| www.254179.com-糖果彩-| www.326263.com-彩宝彩票下网站| www.400906.com-七星彩最大值| www.586274.com-彩票二等奖能中吗| www.662543.com-重庆彩票兑奖中心| www.766133.com-猜单双的彩票叫什么| www.856613.com-七星彩论坛码王驾到| www.923439.com-七星彩私人做庄| www.982015.com-贵州省体彩开奖中心| www.bu41.com-广东有快三吗| www.to43.com-七星彩彩票开奖查询| www.05ag.com-新手彩铅画教程| www.74lq.com-3d助手彩吧走势图| www.1274.xyz-金7乐彩票开奖| www.33912.cc-众购彩票网-| www.77980.com-上海快三投注平台| www.026836.com-刷彩金兼职平台| www.103642.com-鸿运彩票官方| www.170466.com-彩票查询表-| www.302031.com-5分快三开奖号码| www.369540.com-旺旺时时彩-| www.461793.com-征婚重庆时时彩骗局| www.550213.com-彩票机器人投注| www.662950.com-点击更多精彩内容| www.734126.com-海南快三结果查询| www.804076.com-彩票平台二维码| www.874681.com-大同体彩网点查询| www.976269.com-七星彩在什么店买| www.cai9982.com苏州快三开奖查询| www.mn90.com-快三系统彩票| www.1fy.cc-五彩缤纷福满天| www.52bg.com-利彩和立彩的区别| www.698.cc-竞彩猫指数-| www.4166.vip-彩虹六号第4年季票| www.9578.vip-彩票组合打黑一胆| www.72983.cc-彩票中奖多久领取| www.030850.com-大马彩票开奖| www.102779.com-k彩1960代理| www.162509.com-爱彩乐重庆时时彩| www.265391.com-上海快三走势图下载| www.350121.com-浙江卢某大复式彩票| www.422218.com-互站彩票-| www.516008.com-黑金网彩票-| www.579714.com-博乐彩票网手机下载| www.652239.com-福彩3d公告-| www.789865.com-4cm彩色沥青价格| www.864599.com-手机中彩靠谱不| www.926202.com-彩.票开奖号| www.978928.com-500彩票全部软件| www.cb61.com-彩票51官方下载| www.tw33.com-优彩交流-| www.00su.com-雨后出现彩虹的话| www.66ag.com-乐和彩wap-| www.0540.cn-下载中国体彩报| www.01188.com-相富年图彩之网| www.61314.cc-最早福利彩票开奖| www.028000.com-全国彩礼排行榜| www.101068.com-快三做庄会输么| www.165510.com-旺彩官网-| www.291936.com-彩票十大信誉的平台| www.361379.com-e赢彩是真是假| www.444156.com-一分快三预测分析| www.565127.com-豫彩通下载app| www.629554.com-高频彩中大奖| www.694343.com-头奖彩票网最新公告| www.770417.com-快乐好彩-| www.925442.com-天齐网体彩双胆预测| www.978556.com-快三背靠背遗漏| www.me2.com-吉林省体彩中心地址| www.oh05.com-吉林省福彩3d| www.5as.com-昆山张浦镇福彩中心| www.60bk.com-彩票开奖结结果| www.1337.cn-体彩和福彩双色球| www.33848.com-广西快三大小怎么算| www.74338.com-詹天佑3d彩票标签| www.021593.com-优游彩票登陆| www.084541.com-福彩天齐网站| www.162700.com-福彩3d和值定位图| www.309728.com-快三高频彩票害人| www.372037.com-彩宝贝彩票-| www.456222.com-乐博彩票客服| www.539803.com-时时彩后二8码| www.666727.com-足球彩票的几大因素| www.733927.com-山东好彩快三正规么|