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.716937.com-满天星彩铅画| www.3733.top-彩77下载不了| www.831365.com-年会彩票平分评论| www.944487.com-聚彩彩票网合不合法| www.ke94.com-福利彩票中奖查询| www.775.cc-大连竞彩店外兑| www.oe45.com-2020彩票网计划| www.013803.com-海南七星彩最新图纸| www.np46.com-彩票中奖生成器| www.25bc.com-腾讯分分彩后二组选| www.281474.com-福利快三中彩网| www.496403.com-22彩票是官方的么| www.653563.com-下载分分钟彩票| www.970114.com-福建福彩开奖结果| www.10km.com-中国彩票造假视频| www.1264.cn-西藏快三走势图| www.120392.com-福彩3d中奖心得| www.961417.com-七乐彩怎么计算奖金| www.rs77.com-优信彩票购彩大厅| www.35to.com-www.88彩票网| www.459.biz-红旗彩票投注站点| www.sz88.com-体彩六位数-| www.90zk.com-彩票3d破解方法| www.318641.com-外国人跳快三| www.961848.com-三彩服饰网店| www.cai2122.com怎样玩快三-| www.654711.com-彩票代销费怎么结算| www.770839.com-时时彩人工计划稳定| www.876589.com-黑彩3d平台-| www.967499.com-手机彩票群-| www.em21.com-福彩3d彩吧图库| www.ie33.com-福彩3d中奖结果| www.758.cm-时时彩和值平刷技巧| www.859985.com-时时中彩票在哪里下| www.949427.com-福彩何首乌字谜| 6678彩票www.2688cai.com| www.120239.com-澳门五分彩开奖结果| www.007850.com-彩票开奖软件原理| www.cp128.com-新韩国快三开奖结果| www.og64.com-皇都彩票可靠吗| www.307938.com-福彩快三赔率199| www.804115.com-注册火箭娱乐时时彩| www.919188.cc-时时彩谁有网址| www.985828.com-c61彩票app-| www.ac03.com-我的彩票开奖结果| www.qy91.com-快三选号方法| www.34zm.com-七星彩特区论坛精选| www.120875.com-彩票条码损坏| www.668651.com-华人彩票彩种| www.968483.com-中国彩票作弊事件| www.639846.com-东方彩票登录邀请码| www.725776.com-快三预算法-| www.362159.com-三地福彩开机号| www.58112.cc-彩迷葫芦第西瓜视频| www.949702.com-休育彩票开奖| www.27070.cc-彩票数字之间的规律| www.012358.cc-快三脚本-| www.692500.com-足球彩票中奖容易吗| www.6000.gg-足彩40期开奖| www.151124.com-瑞祥彩云彩票网页| www.137593.com-彩票作假是国家行为| www.996154.com-今日足彩单场竞猜| www.sj60.com-彩app注册送18| www.70co.com-彩票机会打法| www.195213.com-吉林快三万能走势图| 500彩票www.66621h.com| www.326186.com-彩票游戏软件下载| www.184823.com-湖北快三分布图| www.zv50.com-官网彩96app| www.100246.com-网络彩票犯法判刑| www.184557.com-福彩快3助手| www.261699.com-足彩胜平负数据| www.681248.com-新浪爱彩官网下载| www.773714.com-快3彩票分析软件| www.841918.com-福利彩票公开公平| www.900944.com-彩吧3d图迷第三版| www.960601.com-下载679彩票| 91彩票www.9155f.cc| www.ca16.com-湖北快三前天走势图| www.909086.com-亚博彩票是骗局吗| www.995226.com-足彩冷热指数怎么算| www.jm04.com-彩61骗局-| www.795970.com-全彩网八仙过海| www.876301.com-5d是福彩还是体彩| www.950226.com-国家禁止500彩票| www.lp89.com-彩经网客户端| www.1gt.com-彩票图表制作教程| www.45zk.com-福彩20选8技巧| www.0627.vip-易彩排五开奖号| www.579261.com-3月23号体彩开奖| www.194967.com-吉林快三半顺啥意思| www.818324.com-兰州体彩机申请| www.327700.com-排列五开奖七星彩票| www.429151.com-儿童水彩画颜料套装| www.522266.com-昨天七乐彩开奖结果| www.597369.com-壹号平台彩票官网| www.667274.com-香港赛马彩票图片| www.741249.com-福彩北京幸运28| www.810439.com-0500彩票零售版| www.903969.com-大发彩票客服| www.972645.com-风景画彩铅画| www.cai7890.com体彩甘肃11选5| www.282946.com-临沂彩票老师| www.8241.biz-彩吧助手app| www.25397.cc-彩铅画山茶花| www.g50.club-好彩门户免费资料大| www.378199.com-福彩出啥号-| www.129001.com-福利彩票分分彩| www.776975.com-苹果如何下载立彩| www.907337.com-体育彩票开奖电脑版| www.987977.com-福利彩票什么叫倍投| www.am22.com-网易彩票下载安装| www.sg87.com-彩票娱乐十大平台| www.12dr.com-怎样网上投注福彩| www.37773.com-怎样玩黑彩盈利少| www.7234.cn-彩虹棋牌脚本| www.421779.com-联通手机彩铃网站| www.2697.org-体彩组六七码遗漏| www.0003.live-6位数的彩票叫啥| www.9199.com-航空彩虹股票行情| www.263744.com-百度贴吧彩票| www.566652.com-中彩网欢乐300秒| www.qw44.com-老时时彩360走势| www.63yw.com-福彩3d通选和包选| www.5261.vip-彩6彩票怎么样| www.417703.com-金凤和玺彩画| www.611109.com-彩38平台安全吗| www.900726.com-体彩排列三开奖时间| www.80co.com-青海福彩中心招聘| www.17077.cc-足彩什么时候兑奖| www.610349.com-四川彩票中奖记录| www.632709.com-福利彩票活动| www.770432.com-青海彩票中奖名单| www.883852.com-博瑞彩票正规吗| 多乐彩票www.477373.com| www.ve19.com-河南福彩开的什么奖| www.230.tv-体彩二十分钟一次| www.9886.biz-乐游彩票合买| www.72169.com-网上宝马彩票| www.4472.cc-网络上买大小的彩票| www.86nd.com-乐彩幸运快三| www.092011.com-一分时时彩计划人工| www.28qs.com-幸运十分彩开奖官方| www.643.tv-圣地彩怎么下载| www.4578.biz-吉林快三胆码预测| www.8at.com-吐槽彩票中奖| www.84dr.com-菲律宾2分彩| www.3112.xyz-福彩最大值振幅| www.345444.cc-万博可以买时时彩吗| www.468089.com-零零时时彩收费版| www.053786.com-彩乐乐走势图表| www.168077.com-中国福彩快3走势图| www.397624.com-家彩网排三杀码| www.651007.com-水彩创意装饰画| www.95207.com-怎么拍彩票查中奖| www.219642.com-彩吧网-| www.323862.com-乐彩站app-| www.76ul.com-彩票图表走势| www.989891.com-彩漂液能去衣服串色| www.45901.com-全天重庆市彩| www.001384.com-新彩吧福彩三d| www.388422.com-骰子彩票有什么套路| www.727295.com-天天彩票网四不像| www.800262.com-福建体彩开奖公告|