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.464009.com-福彩专家群-| www.842057.com-福彩刮刮乐怎么进货| www.tm37.com-如何申请福彩投注站| www.084001.com-彩票托会见面吗| www.360019.com-海南私彩三字现包码| www.504689.com-什么叫彩排-| www.631356.com-2018年顺丰彩票| www.749304.com-中彩彩票有风险吗| www.970374.com-中国体育彩票任选九| www.gr12.com-好彩1开奖结果| www.438477.com-乐亿彩票网-| 500万彩票www.98528c.com| www.872497.com-贵州体彩专家| www.187148.com-时时彩开户-| www.666516.com-和乐彩票首页| www.788856.com-竞彩比赛投注量| www.999329.com-大运彩票手机app| www.qy27.com-信彩-| www.64va.com-福彩3d猜三同| www.017788.com-福彩3d幸运码安卓| www.917098.com-春天彩票合法吗| www.604747.com-新浪爱彩论坛| www.708782.com-彩神lll下载安卓| www.810836.com-彩票走势图规律| www.901408.com-福彩勇士争先玩法| www.987745.com-乐米彩票安全吗| www.ba12.com-网络快三违法吗| www.607800.com-韩国2分彩-| www.720399.com-计算竞彩足球胜平负| www.840094.com-体育竞彩外围| www.972458.com-日彩网-| www.jn43.com-分分彩吧-| www.964410.com-幸运彩票的号码规律| www.032774.com-彩票教程-| www.659149.com-快乐彩怎么看开奖| www.956056.com-唯彩足球竞彩网首页| www.qi71.com-好彩1中奖规则| www.096881.com-新粤彩网-| www.268568.cc-体彩助手app下载| www.019031.com-苏州体彩兑奖地址| www.232188.com-旺彩双色球下载| www.385472.com-怎样领福彩一等奖| www.91824.com-广东彩王彩图图片| www.586395.com-免费赠送彩金平台| www.724011.com-凤凰彩票元角模式| www.853480.com-海南体彩开奖彩票| www.958832.com-彩票节后什么时开售| www.ax08.com-内蒙古快三开奖软件| www.083375.com-澳客彩-| www.4161.biz-彩7网-| www.39831.cc-彩运彩票app| www.662272.com-彩乐乐网公告| www.81500.com-快三中三个多少钱| www.000436.com-时时彩有赢钱的吗| www.r13.org-体育彩票几个数字| www.150461.com-中国官网中福快三| www.233684.com-体彩湖北11选五| www.311571.com-福彩开心十分钟| www.375621.com-五星电玩城彩金| www.465904.com-福彩3d胆码预测表| www.559099.com-大彩网专家分析| www.619668.com-打彩票图片大全| www.311695.com-红牛彩票靠谱吗| www.567476.com-体彩刮刮乐开奖结果| www.642338.com-福彩标志图片含义| www.704806.com-中国福彩中奖规则图| www.779715.com-福彩3d杀号公式| www.854279.com-彩票票app-| www.0778.win-什么软件可以买足彩| www.7227.in-彩虹6号墨冰怎么卖| www.27520.cc-足球竞彩单场列表| www.232773.com-福彩迷快3-| www.065817.com-彩票提现不了| www.5407.cc-中国福利彩票102| www.26771.cc-七星彩奖虫怎么用| www.137484.com-易彩手机版-| www.09089.com-怎么购彩票-| www.158421.com-北单串子和竞彩串子| www.533130.com-彩票平衡原理| www.660932.com-老徐说彩今天| www.980924.com-彩788贴吧-| www.262750.com-海南彩-| www.361026.com-正规高频彩开奖网站| www.959843.com-手机购彩是犯法的吗| www.cp091.com-喜乐彩开奖结果查询| www.560903.com-彩票双色球选号投注| www.652958.com-瓷母釉彩的成分| www.748485.com-时时中彩96086| www.815373.com-海南私彩梦册| www.891466.com-彩神计划破解版下载| www.957103.com-金利彩票能玩吗| 众彩网www.88065b.com| www.5035.vip-福利彩票怎样购买| www.205520.com-安徽快三走试图| www.366208.com-海口体彩在哪取| www.458075.com-博彩搭建一条龙| www.338010.com-今晚福彩开什么号| www.464234.com-彩票妙招-| www.583388.com-彩神国际代理| www.691308.com-竞彩牛庄-| www.4285.biz-奇妙时时彩k线软件| www.614119.com-彩票网乐天预测| www.708196.com-大发优信彩票邀请码| www.867946.com-海南七星彩千军万马| www.70ux.com-蛋蛋彩画-| www.1090.cn-体育彩票排五| www.6769.net-93彩票网址-| www.406859.com-七星彩是搞诈骗的吗| www.506081.com-乐盈彩票吧-| www.08207.com-长沙体彩兑奖地址| www.023467.com-七乐彩专家下期开| www.952606.com-彩k-| www.aj68.com-更早彩票开奖结果| www.137878.com-南充体彩兑奖处| www.2ri.cc-体育彩票返点是多少| www.82st.com-竞彩串关是什么意思| www.35be.com-海南七星彩808| www.411.cc-家彩开机-| www.642788.com-591万彩票无人领| www.3911.cc-四柱预测彩票| www.9382.org-那种彩票容易赚钱| www.q68.top-福彩双色球3d玩法| 乐点彩票www.936336.com| www.602419.com-梦想彩票骗-| www.710931.com-彩票刷子平台| www.780925.com-玩彩票幸运28软件| www.839605.com-福彩中奖查看| www.889985.com-时时彩对赌平台| www.79oy.com-代购福彩快三| www.3949.net-微彩汇总-| www.700611.com-快三是人为控制| www.801698.com-奔驰彩票是真的假的| www.874609.com-山西体育彩票站| www.941201.com-阿里淘彩彩票娱乐| www.983497.com-绵阳福彩机中心| www.cm9.com-北京福彩今日快3| www.2381.in-七彩西游记在线豆丁| www.310248.com-国家体彩中心主任| www.08nr.com-爱购彩票有几个版本| www.029183.com-大乐透购彩-| www.110171.com-帝皇彩票骗局| www.630109.com-电子彩报3d版| www.39628.com-盛兴彩票v3-| www.9424.top-七星彩四等奖多少钱| www.431913.com-体彩每周几开奖时间| www.380633.com-体彩中心开奖直播| www.560035.com-晓风彩票软件破解版| www.668596.com-非凡彩票网走势图| www.793065.com-三河市福彩中心地址| www.882375.com-英国5分彩开奖结果| 必发彩票www.626212.com| www.ma87.com-天津时时彩走势图| www.i58.xyz-上海快三最大遗漏号| www.38dz.com-重庆时时彩注册平台| www.286328.com-冮苏快三-| www.367342.com-周四什么彩票开奖| www.466388.com-分分彩反倍投| www.542666.com-来彩020官网| www.599251.com-海南七星彩开奖| www.657281.com-了解七星彩规律| www.715998.com-彩神争霸网址登陆| www.777778.com-818导航彩票网站| www.828942.com-能微信提现的彩票| www.885135.com-神州彩票官网|