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天

知道了
彩票123现在叫什么名字 www.166569.com-快三彩票平台哪个好| www.988611.com-必中彩票是个坑| www.130259.com-汇彩网是不是假的| www.7016.vip-成都三圣乡七彩田野| www.36426.com-澳门彩网-| www.965262.com-辽宁彩票官方网站| www.cai5111.com内蒙古快三就是牛| www.879673.com-福彩3d八卦图| www.954308.com-时时彩最快开奖网| 易彩集团www.25688e.com| www.997479.com-七星彩内部册子| www.07pi.com-动漫古风彩铅画| www.1047.vip-安徽快三和值跨度表| www.055790.com-cp577彩票平台| www.229588.com-易彩网是不是黑平台| www.6743.vip-福利彩票怎么网上买| www.376127.com-彩票在那个平台玩好| www.609201.com-香港赛马及派彩| www.687738.com-乐彩网3d字谜图谜| www.771068.com-好彩堂禁三肖| www.xb34.com-幸运彩平台-| www.41xl.com-彩色透水地坪价格| www.488487.com-彩经网组选杀号| www.599386.com-百盈快三的投注规律| www.319605.com-福彩三弟和值表| www.841876.com-彩票用途-| www.963331.com-胜负彩500比分网| www.04yg.com-七乐彩开奖顺序号| www.946563.com-商丘彩礼-| 财神网www.29277z.com| www.220275.com-北京快三公交路线| www.299412.com-福彩3d藏机图全部| www.366848.com-天下彩网彩票资讯网| www.479578.com-江西体彩网中奖信息| www.833616.com-体彩排列三开奖日| www.904434.com-彩神合法吗-| www.967795.com-百合网上的彩票托| www.cp913.com-福彩6+1-| www.825277.com-如何成为竞彩猫专家| www.47914.com-甘肃快三中奖秘诀| www.782901.com-福运彩官网-| www.673171.com-500万体彩走势图| www.858281.com-体彩最大遗漏数据| www.zv0.cc-厦门快三开奖结果| www.0760.love-彩票api安装| www.09705.com-天天彩票网登陆| www.57615.cc-ag彩数据骗人吗| www.380220.com-七乐彩号码预测专家| www.101182.com-中国彩票投注技巧| www.53ct.com-下载贵州福利彩票| www.198608.com-快3彩票规则| www.18081.cc-彩票奇偶数打法| www.255719.com-快三出什么买什么| www.1292.cn-彩票查询大乐透开奖| www.683579.com-彩票免费彩金| www.587574.com-中彩网最新公告| www.754255.com-下载安装财经彩票| www.888373.com-128彩票诈骗| www.997439.com-下载中国彩票软件| www.ne80.com-皇都彩票登录| www.1240.net-神采奕奕的彩的意思| www.08398.com-陕西彩票中奖| www.89741.com-福彩主任什么梗| www.566536.com-北京和彩放题哪家好| www.07pb.com-彩铅画虹之玉教程| www.112955.com-靠谱的彩票软件下载| www.5565.cc-万彩吧高手解料| www.25995.com-有关彩虹的美好寓意| www.661061.com-彩票计划基地| www.747178.com-全球彩票所有版本| www.820108.com-河南天价彩礼事件| www.8910.bid-今日竞彩比分直播| www.113623.com-开彩票店需要多少钱| www.271763.com-丰彩彩票网-| www.13867.cc-体彩008-| www.654493.com-福利彩票一期销售额| www.817709.com-19050足彩推荐| www.284.cn-七星彩app靠谱吗| www.301688.com-五子彩球游戏下载| www.395600.com-彩虹歌谱-| www.518680.com-惠民彩票官网| www.240233.com-神彩争霸下载地址| www.342266.com-谁有江苏快三群| www.830903.com-川沙彩票店-| www.971452.com-彩票赚钱是真的吗| www.fk72.com-七乐彩奖金计算器| www.477411.com-足彩胜负彩单注奖金| www.bh12.cc-体彩十一选五浙江| www.598438.com-七星彩19028| www.695292.com-彩客网赛果概率分析| www.788020.com-竞彩单场310| www.865456.com-分分彩牛牛计算公式| www.124450.com-买彩票能中大奖吗| www.077818.com-旺财彩票代理| www.4495.top-彩票投注点站| www.944904.com-82彩票下载-| 爱彩www.235693.com| www.514344.com-重庆时时彩高倍中| www.384222.cc-抓取彩票号码| www.38792.com-有兼职叫注册中彩网| www.811556.com-优的足球彩票| www.96sz.com-表演节目彩排的说说| www.4788.com-彩虹六号游戏下载| www.ql69.com-博牛彩票平台下载| www.139622.com-盈彩网可以玩吗| www.258493.com-中国足彩竞彩| www.95105.com-利民彩票官网| www.128364.com-天天彩票免费资料| www.530024.com-福彩家彩论坛| www.617364.com-博猫平台彩票| www.711666.com-郑州结婚彩礼多少钱| www.828804.com-218永信彩票| www.905675.com-幸运快三计划网页版| 同乐彩票www.tlcp7.com| www.io23.com-足彩预测网-| www.21gz.com-六六六彩票-| www.93lc.com-222彩票注册| www.522002.com-时时彩龙虎连续出和| www.04561.com-下彩网是真的吗| www.940880.com-天天乐彩票平台注册| www.iz40.com-体彩下载官网app| www.f16.org-航天彩虹股票行情| www.57834.com-福利彩快三-| www.503030.com-球彩友多店铺二维码| www.918236.com-955彩票娱乐平台| www.9515.loan-足彩十四场投注推荐| www.426883.com-四川体彩网开奖结果| www.765345.com-老808彩票-| www.139847.com-盈彩在线是合法的吗| www.042700.com-过年不能买足彩| www.05ip.com-竞彩猫直播预测分析| www.se93.com-下载分分彩官方网站| www.888889.com-三十五选七福利彩票| www.hm1.com-彩票术语大全| www.rm72.com-彩票的走势如何看| www.16jx.com-七星彩彩版互换区| www.0731.win-彩票互刷拿佣| www.623686.com-财富彩票是骗局吗| www.749048.com-重庆彩独胆技巧| www.843081.com-竞彩返还率是多少| www.913780.com-福彩双色球领奖流程| www.992129.com-中国足彩馆踩踏网站| www.hq05.com-北京单场和胜负彩| www.068837.com-609彩票-| www.03033.cc-彩中彩怎样才中奖| www.809379.com-哪种彩票中奖率高点| www.3398.mobi-58彩票公司在哪吗| www.28639.com-彩票和股票哪个害人| www.559733.com-彩宝网是真的吗| www.569899.com-天天中彩票注册3元| www.659082.com-南国特区彩票论坛一| www.737291.com-玩彩票输了30万| www.808996.com-一般买彩票买几柱| www.877712.com-足球博彩算赌博吗| 博通彩票www.894450.com| www.gs07.com-168彩票手机版| www.g81.cn-彩宝网3d基本走势| www.18ku.com-金沙送99彩金| www.95211.com-聚鑫彩票是真的假的| www.152.pw-彩虹首歌怎么理解| www.6563.biz-彩票18幸运号码| www.82to.com-和彩印怎么设置内容| www.217709.com-网易彩票平台| www.t69.club-118官方彩票入口|