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.783245.com-机选七乐彩号码| www.30022.cc-网上亿彩是正规的吗| www.028903.com-鸿彩主播火火| www.173872.com-下载江苏快三新版本| www.312620.com-快三杀号定胆| www.505988.com-盛彩彩票注册| www.679472.com-可乐彩票-| www.824096.com-三彩女装折扣店| www.982373.com-彩票站提成多少| www.iw71.com-体彩虚拟足球| www.92wt.com-彩票下单助手正规吗| www.6507.org-开彩票盘需多少钱| www.319218.com-大发快三怎么看| www.05111.com-彩票上的x-| www.1553.vip-3d安全购彩杀号| www.01310.com-国彩彩票免费下载| www.188165.cc-安徽快三入门| www.304876.com-易彩网彩票下载| www.388307.com-华彩app官方下载| www.536108.com-体彩七星开奖结果| www.151507.com-号百彩票-| www.678653.com-福彩3d最准双飞| www.191013.com-安徽快三为啥会提前| www.308708.com-黔东南福彩中心地址| www.426655.com-烟台体彩胜负群| www.356760.com-彩票怎么宣传| www.209844.com-福彩快三代理要求| www.628262.com-赢家彩票是真的吗| www.186587.com-重庆时时彩停了吗| www.it21.com-江苏体彩e球彩下载| www.4cj.com-西班牙彩票中奖号码| www.66tu.cc-拉菲时时彩手机端| www.1414.in-万彩c8-| www.7537.com-竞彩怎么拉客户| www.422270.com-中国移动彩铃设置| www.5327.cn-167彩票app-| www.662701.com-观看更多精彩内容| www.421465.com-七星彩预测号众彩网| www.908224.com-炫乐彩票网站| www.994670.com-辉煌彩票注册网址| www.gm21.cc-国家对彩礼有新政策| www.j60.top-体彩排三藏机图| www.5617.cn-重庆时时彩票真的吗| www.512791.com-王者彩票一首页| www.654146.com-福彩8首页下载| www.51wx.com-陕西快三开奖走势| www.025103.com-下载彩之王app| www.808922.com-柬埔寨五分彩官网| www.934418.com-体彩电视怎么设置| www.989284.com-微彩站app靠谱吗| www.mf5.com-内蒙古快三开奖详情| www.1674.pw-信誉较好的私彩平台| www.14868.com-6和彩生肖开奖结果| www.134365.com-贵烟新好彩价格表| www.73553.cc-买彩票违法吗| www.794643.cc-大乐透走势新浪爱彩| www.46473.com-陕西三彩集团怎么样| www.97558.com-众彩网官网-| www.511453.com-五洲彩票受吧| www.01316.com-博大娱乐注册彩金| www.186702.com-牛彩票开奖直播| www.43600.com-爱彩a22下载| www.93008.com-彩钢瓦屋顶防水施工| www.059484.com-k彩官方-| www.3852.org-七星彩杀四位| www.019534.com-四川体彩开奖结果| www.59962.com-足彩8串8-| www.653680.com-五分快三大小双技巧| www.778995.com-好彩票app官网| www.863587.com-彩票接口调用| www.82aq.com-竞彩冷热指数怎么看| www.063632.com-私彩什么平台靠谱| www.51943.cc-福利彩票3d72期| www.011174.com-上海快三8千期遗漏| www.092697.com-彩民双色球领奖| www.149886.com-悟空彩票下载| www.mk16.com-彩票网站大全app| www.g66.top-大乐透免费预测彩经| www.1059.wang-法国酷彩官方旗舰店| www.7782.org-七乐彩投注秘籍| www.22795.cc-江苏快三微信诈骗群| www.781084.com-彩虹连衣裙-| www.862061.com-最好的彩票书籍| www.947531.com-福彩视频讲座| www.996807.com-双色球彩票机选一注| www.tk8.com-爱彩乐计划-| www.og09.com-皇都彩票假不假| www.x89.xyz-聚客手游彩票| www.791911.com-3d时时彩票机| www.591929.com-福彩三地连线走势图| www.703226.com-万家彩票是什么| www.wc52.com-网售彩票最新消息| www.92703.com-nba季后赛彩票| www.5426.vip-新彩彩票怎么样| www.638055.com-啥叫福彩-| www.ko15.com-统一彩票幸运快三| www.234246.com-快三害人不浅| www.8964.xyz-金福彩票官网手机版| www.036983.com-彩票01官方-| www.515824.com-竞彩返还率越来越低| www.791908.com-2017足彩漏洞| www.128421.com-天天彩票999| www.216251.com-体彩7星彩开奖结果| www.61819.cc-牛娃彩票图库| www.73340.com-彩圣网免费五肖资料| www.76.com-快三彩票和值连出大| www.083.me-福彩双色球预测频道| www.792910.com-阜阳福彩兑奖地址| www.mw86.com-微彩吧苹果下载| www.u63.club-新彩吧3d总洰| www.720356.com-中国福彩自助终端| www.8851.net-陕西彩票安康| www.202507.com-遵义市福彩中心| www.268570.com-哈尔滨快三开奖结果| www.0338.org-双色球彩民乐图文版| www.4705.top-也买彩是骗局吗| www.fh19.com-大发彩神ll8| www.495342.com-国内做博彩代理| www.583777.com-彩乐app官网下载| www.659536.com-牛彩娱乐平台登录| www.730017.com-生彩宝手机版| www.793114.com-v8彩票不让提现| www.860760.com-快三二同号稳赚技巧| www.928145.com-彩色一体打印机| www.977324.com-彩礼钱不能超过2万| www.960.gg-千禧网_家彩开奖| www.tg25.com-95彩票网安全吗| www.302537.com-河北福彩中奖规则| www.397243.com-高频彩提现多久到账| www.629106.com-如意彩十码-| www.cai6600.com吉林省的彩票快三| www.0051.top-给我一组彩票号码| www.811205.com-六爻测彩票断决1| www.869258.com-七星彩012-| www.929137.com-福彩网是什么平台| www.974661.com-易众彩店下载| 吉利彩票www.80065w.com| www.96651.com-中国彩票作弊人员| www.3079.vip-福彩图库天天中| www.070991.com-快三彩票必赢| www.206821.com-038彩票官方正版| www.291269.com-020环彩网-| www.362162.cc-天空出现彩虹写句子| www.974083.com-闪蒙快三-| www.55bv.com-福利彩票贵州快3| www.27rx.com-彩民算不算赌徒| www.126644.com-鸿运五分彩走势图| www.326.bid-中福彩票输赢有多大| www.373916.com-体育彩票怎样增加| www.713293.com-王者彩票是黑平台吗| www.973436.com-彩虹抖音翻唱| www.12en.com-特彩吧下载安装| www.156413.com-好彩堂切0232| www.962392.com-大发彩票手机登录| www.ua21.com-竞彩足球球赛改期| www.286571.com-7070彩票-| www.849199.com-重庆彩专家计划| www.903071.com-可以彩票合买的软件| www.960936.com-快三彩票中奖助手| 彩82www.c6127.com| www.wq7.com-今天彩票开奖号码| www.mm98.cc-时时彩专业版| www.a54.net-足彩稳赢方法| www.10fd.com-七星彩开奖宝贝儿|