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天

知道了
彩01彩票 www.542809.cc-彩客彩票37旧版| www.1303.site-海口有几种彩票| www.106702.com-体彩开奖3d| www.077344.com-公鸡七星彩奖表| www.370507.com-彩票快三官方网站| www.733787.com-廊坊双色彩票中奖| www.637723.com-彩六要挂加速器吗| www.726138.com-彩神v8是什么| www.760353.com-彩吧官方网站| www.535563.com-彩票8位数-| www.92169.cc-下载顺丰彩票| www.56dj.cc-彩票振幅有什么用| www.0967.vip-风采与风彩区别| www.7184.vip-彩宝品牌-| www.7308.org-彩虹六号联赛| www.730278.com-时时彩倍投策略| www.892828.com-体彩开体彩开奖| www.96653.com-彩票分类及奖金| www.585203.com-7070彩票最新版| www.780321.com-看体彩排五开奖号码| www.005511.com-彩票平台软件出租| www.06755.com-福彩金胆王一语定| www.11618.com-竞彩完场比分005| www.004894.com-周三什么彩票开奖| www.161042.com-龙里彩票-| www.432533.com-高频彩调整游戏规则| www.135221.com-雷诺好彩1-| www.5bq.com-我要查彩票号| www.54gy.com-天空彩彩-| www.142596.com-彩虹娱乐骗局| www.565464.com-网络代打彩票分红| www.768278.com-彩胜app-| www.984274.com-二分彩官网-| www.34ta.com-七星彩开奖号码连号| www.571912.com-怎么申请彩票投注站| www.955223.com-老彩票app下载| www.cp915.com-精彩十分开奖今天| www.530531.com-重庆时时彩杀前三号| www.376408.com-体彩第18143期| www.599027.com-中国福彩35期| www.797976.com-彩票半全场-| www.994107.com-海南体育彩票飞鱼| www.ql36.com-福彩跑马幸运走势图| www.81kt.com-竞彩单场套利| www.00697.com-乐彩论坛_手机版| www.365341.cc-彩客网完全版| www.520983.com-如何判断快三出号| www.596979.com-久彩彩票ios| www.83fj.com-幸运彩票是什么东西| www.sn74.com-网上彩票网被骗报警| www.137868.com-彩之星彩票靠谱吗| www.276644.com-江苏快3快彩乐开奖| www.937010.com-福星彩下载-| www.cai4655.com广西快三走势图今天| www.984341.com-体彩彩票助手手机版| www.14gd.com-七星彩现场电视台| www.5688.online天乐乐彩票网| www.72959.cc-黑龙江好彩快三| www.981662.com-l中国体彩官方网| www.04374.com-今日彩票官方下载| www.ah57.com-腾讯彩票客户端下载| www.49sd.com-买竞彩足球输光了钱| www.4672.com-最好的买彩网| www.122934.com-快三技巧吧-| www.340888.cc-达人彩票骗局| www.371562.com-瑞彩祥云彩票提现| www.698073.com-温州体彩中心怎么走| www.785666.cc-金慱彩票-| www.859707.com-官方699彩票| www.949583.com-大彩鲸十一选五助手| 幸运彩票网www.33598n.com| www.409791.com-今天彩票信息| www.099400.com-百盈彩票登录网址| www.68af.com-网易彩票真实性| www.130779.com-彩票带赚团队| www.09yn.com-3d彩票几点封盘| www.ao6.cc-安徽快三走势图助手| www.nw16.com-福彩3d兑奖地点| www.p19.com-体育彩票几位数啊| www.9018.vip-赛车彩-| www.91673.cc-炫彩网络是什么东西| www.103754.com-体彩排列三定胆方法| www.206270.com-投彩是什么骗局| www.668080.com-福建彩票下载安装| www.459035.com-大乐透机选彩票号码| www.616524.com-体彩送的自行车| www.005364.com-手机挣钱高频彩骗局| www.1248.cc-易发彩票下载手机版| www.909094.com-甘肃快三中奖助手| 梦想彩票站www.43131t.com| www.19251.com-福利彩票能买大乐透| www.328873.com-江苏快三如何抓豹子| www.274247.com-金鹰时时彩全天计划| www.921069.com-彩神app官方| www.849595.com-足彩大彩网-| www.990264.com-福利彩票几个数| www.k43.top-快三群吧-| www.z32.xyz-福彩三地图迷| www.219002.com-彩票刷负盈利技巧| www.7850.pw-福彩任选5-| www.573589.com-老时时彩开奖k线图| www.703808.cc-苏州快三开奖走势| www.822197.com-爱博彩票67768| www.929716.com-时时彩三星和尾| 众盈彩票www.77996d.com| www.832595.com-三国孙尚香星彩无惨| www.957695.com-乐透彩开奖结果| www.cp8388.com-天天快三是合法的吗| www.zx12.com-以彩票为由的传销| www.311202.com-彩票加入会员| www.769566.com-好彩店比分-| www.856017.com-云南有快三嘛| www.950291.com-百乐彩票用户登录| www.we10.com-甘肃省体彩中心电话| www.197565.com-今晚七星彩开什么| www.96665.com-彩票案件-| www.73695.com-福利彩票秘密组合| www.103498.com-竞彩足球胜平负分析| www.67hu.com-中彩国际手机客户端| www.xa00.cc-旺彩官方下载苹果| www.478984.com-大发购彩-| www.560591.com-超级彩票是真的吗| www.877997.com-江西福彩11选五| www.cai1392.com中国快三-| www.215139.com-旭彩网靠谱吗| www.089493.com-快三国家统一开奖| www.859070.com-预计彩票中奖号码| www.937785.com-c2彩票下载-| www.991858.com-大乐彩开奖结果查询| www.ed84.com-快三代理返点怎么算| www.706977.com-河南福彩幸运一| www.817673.com-福客来彩票购彩大厅| www.944001.com-微微彩票官方网站| 世彩堂www.5854q.cc| www.233073.com-重庆福彩中心官网| www.21839.cc-五年以上的彩票平台| www.75996.cc-竞彩计划表制作| www.720810.com-新彩票易彩快3| www.835929.com-七乐彩旋转矩阵缩水| www.911018.com-微信彩票购买| www.970829.com-迷彩免手机影视网| www.cai5503.com甘肃快三直选走势图| www.op76.com-手机在线app体彩| www.nj70.com-新浪老式竞彩比分| www.671492.com-万富彩票官网| www.735696.com-足球大赛彩票| www.wa25.com-福彩快3是真的吗| www.472655.com-彩票沉迷-| www.50wp.com-有哪些彩种是官方的| www.5319.biz-qq彩色气泡代码| www.26932.com-下载2元彩票网| www.nv49.com-微信赌彩-| www.21qs.com-著名福利彩票口号| www.009426.com-快三中一注多少钱| www.71qt.com-四位数买什么彩票| www.144578.com-中国竞彩足球对阵表| www.42149.com-彩票12是什么| www.950333.com-红旗彩票三站下载| www.999152.com-汇彩app下载| www.si40.com-彩票代玩长期兼职| www.984838.com-福彩网提现-| www.kp24.com-彩票中奖秘诀| www.32to.com-体彩走势图31选7| www.227072.com-大发快三开奖号|