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.716977.com-彩铅调色-| www.858303.com-即是开彩-| www.935888.cc-彩神uv打印机| www.988140.com-福彩快三彩票安微| www.rt4.cc-e球彩总进球数奖金| www.457826.com-恒彩总代-| www.639495.com-彩票店桌椅摆设| www.813042.com-高频彩开奖结果| www.8489.com-万利彩票登陆| www.6142.vip-彩票协会-| www.501551.com-河北省体彩官网| www.0422.vip-418彩票下载| www.670885.com-福彩3d六码预测| www.806290.com-98娱乐时时彩| www.913330.com-彩客网怎么买彩票| www.8217.xyz-cc彩投网-| www.92296.cc-大发500彩票平台| www.846109.com-彩票中了大奖怎么花| www.80712.com-3d彩吧预测总汇| www.9882.biz-万森彩票代理| www.672257.com-双色球万彩吧荐号| www.767499.com-六令彩旺甬网| www.855090.com-福利彩票位数| www.920711.com-百万争霸福彩app| 网易彩票www.177417.com| www.lz96.com-足彩下单软件| www.893379.com-体彩开奖历史开结果| www.649660.com-排列五开奖彩宝贝| www.95aq.com-投彩据点-| www.px82.com-安徽快三害死多少人| www.831505.com-年会彩票中奖| www.88522.com-7u彩票-| www.971766.com-全彩漫画-| www.oq23.com-盈彩-| www.17rf.com-新浪彩票一新浪网| www.91fh.com-500彩票包赔| www.2323.in-带打彩票-| www.9526.vip-海南私彩下期走势图| www.234262.com-甘肃快三对子| www.252178.com-3d旺彩网-| www.60an.com-福彩双色彩球开奖| www.239635.com-王者彩票有漏洞没| www.385098.com-彩票更改数据端数据| www.508955.com-腾讯体育竞彩推荐| www.9760.in-重庆时彩跨度| www.52455.com-百盈大发快三计划| www.018131.com-豹赢彩票是骗局| www.113567.com-骰子猜大小彩票| www.ss01.com-时时彩玩九码输死| www.c76.vip-江苏快三骗人吗| www.39678.com-爱彩彩票安卓版免费| www.92354.com-04彩票-| www.053739.com-yy彩票登录| www.035855.com-幸运时时彩计划网页| www.318422.com-快三和值跨度表图片| www.54464.com-时时彩后三购买| www.583970.com-真正的足彩大咖| www.697190.com-彩票清明放假| www.774628.com-2019体彩刮刮乐| www.2260.me-有没有贵州快三| www.669570.com-讲故事展风彩| www.751032.com-高频彩票为什么上瘾| www.820345.com-河南地区彩礼排行| www.894907.com-福彩快三怎么算和值| www.964962.com-体彩今天开奖视频| www.cp0178.com-安徽快三下载安装| www.121040.com-体育彩票双色球开奖| www.03qy.com-大星彩票注册| www.77lk.com-福利彩票就是假的| www.625520.com-七乐彩杀号2元网| www.785433.com-快乐5分彩开奖结果| www.878417.com-福彩3d五行预测| www.958369.com-七星彩下期预测码| www.cp322.com-快三投注平台下载| www.1855.tv-彩票60秒官方网站| www.nm86.com-竞彩什么app好| www.2025.com-河南福彩网上投注站| www.022915.com-分分快三彩票破解器| www.501826.com-k彩登陆浅路测速| www.581589.com-彩八仙时时彩ios| www.660356.com-桥洞研究彩票| www.886035.com-彩虹图片真实照片| 易彩网www.36166h.com| www.451463.com-彩吧红五图3d图库| www.li26.com-今日彩票apk| www.00wc.com-彩票掉了一点角| www.73bz.com-验证手机号码送彩金| www.657389.com-天天卖彩票-| www.841711.com-体彩做了哪些公益| www.954116.com-360彩票正规吗| www.cg53.com-买彩票就这几招| www.74hv.com-久久彩票举报| www.167316.com-中国福利彩票手机版| www.92ud.com-分分彩作弊怎么弄| www.576084.com-彩票v9-| www.29212.com-彩票端是正规的吗| www.036703.com-彩票榜cpbapp| www.46hl.com-彩票3d开奖22号| www.724332.com-cc彩球网登录| www.539687.com-彩票怎么杀号| www.638234.com-上海竞彩店申请| www.728708.com-快三所有号码排列表| www.803758.com-买彩票违法吗| www.876145.com-福彩3d高手技巧| www.935705.com-上海时时彩开奖纪录| www.979604.com-一品彩票-| www.cp7522.com-福彩快三开奖一定牛| www.305895.com-中彩票挥霍-| www.80909.cc-燕赵福彩排五走势图| www.420485.com-中博彩票平台有哪些| www.807859.com-各种彩票获奖介绍| www.921127.com-彩神大发官网| www.tk9.com-甘肃省快三遗漏| www.585975.com-红旗网彩票官方网址| www.661100.com-乐赢彩票安全吗| www.0768.cn-好彩票28-| www.779152.com-韩国都有什么彩票| www.672521.com-彩票赢家资料| www.821149.com-民政部福利彩票中心| www.724843.com-买彩票就是赌博| www.876897.com-体彩大乐透技巧视频| www.5610.vip-赠送彩票充值卡| www.899642.com-xy313幸运彩| www.166430.com-快三平台手机版下载| www.700512.com-3d彩迷-| www.187628.com-私彩漏洞-| www.282899.com-中国福彩网官网| www.806602.com-老猫出彩快讯app| www.895181.com-京东快彩是啥| www.692660.com-17彩票停售-| www.812739.com-福彩3d中奖绝招| www.4fx.com-加拿大中彩票| www.97iu.com-网站被彩票网线劫持| www.5298.cm-时时彩如何买龙虎和| www.492868.com-178彩票购买平台| www.560873.com-我要中彩票软件下载| www.69928.cc-彩票中200万图片| www.518980.com-山东手机在线彩票| www.393954.com-色彩对比作业图| www.242867.com-买彩票的人赌博| www.33001.cc-南京体彩销售点| www.90870.com-六亿彩app-| www.144948.com-彩票出票员-| www.33927.com-一起彩票app| www.97150.com-飞龙在天竞彩推荐| www.835663.com-双色彩票-| www.90yz.com-下载期期好彩| www.231944.com-福彩字谜图迷总汇| www.295500.com-快乐彩票三网站| www.350735.com-彩装膜批发市场| www.42fa.com-唯彩看球预测完整包| www.7553.cc-体彩如何开通竞彩| www.545.cn-天雯网彩票论坛| www.756327.com-4567彩票犯法吗| www.851153.com-香港6万彩开奖结果| www.975228.com-彩控智能网-| www.4pa.com-咋买彩票能中大奖| www.795989.com-廊坊彩票大奖得主| www.916166.com-怎么加盟体彩彩票店| www.fs6.cc-时时彩趋势图app| www.81og.com-北京足彩单场怎么玩| www.39555.com-好彩属于正规的| www.a82.cc-江苏快三走势图带连| www.774026.com-爱彩乐浙江快乐12|