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.354019.com-彩票中奖后怎么纳税| www.xs93.com-彩票怎样买-| www.725962.com-怎样买3d彩票| www.914021.com-乐彩网排三开奖结果| www.1145.cm-湖北快三号码表图片| www.031844.com-黑彩平台代理返点| www.459305.com-济宁福彩中心兑奖| www.512711.com-零基础学彩铅画入门| www.fp30.com-浙江体彩网手机板| www.381057.com-跟彩票有关的群名称| www.543255.com-观老头看彩专栏| www.695108.com-竞彩投注比例查询| www.802255.com-体彩大乐透投注软件| www.149026.com-大花猫彩报2| www.294074.com-彩票不能提现怎么办| www.7960.vip-正好彩票网黑龙江| www.dp27.com-3d试机号彩宝贝| www.q14.org-河北快三黑红号预测| www.741690.cc-免费送彩金的游戏| www.22237.cc-58彩下载安装| www.981448.com-竞彩任九必杀宝| www.fw44.com-福彩福建快三走势图| 博乐彩票www.355711.com| www.pk23.com-快三宝典下载| www.351562.com-福彩和体彩一体店| www.487016.com-体育彩票店能转让吗| www.84gl.com-时时彩倾家荡产| www.223715.com-竞彩足球直播| www.355511.com-福彩3d专家杀码村| www.294447.com-快三黑彩票-| www.389093.com-彩82-| www.511658.com-手机彩库宝典下载| www.69423.com-竞彩计划表下载| www.052974.com-融彩网是什么| www.751441.com-淘之家彩票-| www.860883.com-大发快三主赢软件| www.946813.com-彩钢金属围挡| 五星彩票www.5xcr.com| www.86oj.com-乐透了彩票足球| www.124022.com-安微体彩十一选五| www.1759.xyz-广东福彩走势图| www.17gm.com-彩票机出票原理| www.607018.com-彩票软件免费挂| www.7354.com-彩虹六号用加速器吗| www.95188.com-60彩票安全吗| www.191035.com-彩金鲨鱼游戏机| www.493896.com-新浪澳彩动态| www.5140.vip-河北快3爱乐彩| www.574633.com-湖南福彩论坛| 彩乐乐www.3005.am| www.526112.com-竞彩足球推荐310| www.881739.com-辉煌彩票官网| www.20ub.com-时时彩接口-| www.021254.com-刮刮乐彩票怎么玩儿| www.22828.com-海南体彩飞鱼规则| www.18hi.com-360彩票十一选五| www.98612.cc-腾讯5分彩官网| www.683785.com-足彩用哪个app| www.813355.com-阜阳福彩自助终端| www.900770.com-福彩7乐彩开奖公告| www.969718.com-乐彩论谈-| www.302.cc-买彩票是怎么赔钱的| www.602813.com-彩虹六号国服上线| www.690613.com-福彩排列七怎么开奖| www.776242.com-火箭彩票安卓app| www.880117.com-内蒙古彩票中心地址| www.947082.com-体彩高-| www.996721.com-龙江体彩大乐透查询| www.ff35.cc-七星彩头奖表| www.651001.com-云南时时采彩开奖| www.720230.com-中彩票的概率是多少| www.593876.com-七彩云主机-| www.183952.com-吉林快三中奖规则| www.656817.com-竞彩该如何投资| www.21879.cc-皇朝国际彩票套路| www.295626.com-快三稳赚方法| www.448781.com-彩票倍投计算网页版| www.450670.com-七星彩飞杨头尾规律| www.652809.com-贵州快三推选号| www.856468.com-苏州彩票店转让58| www.225291.com-彩神娱乐平台| www.266377.com-d55彩票-| www.738055.com-福利彩票朋友圈评论| www.847600.com-重点古建筑彩绘| www.nd36.com-彩票开奖11选五| www.016476.com-河北快三今天41期| www.102724.com-8888彩票是诈骗| www.168508.com-北京快三开奖最快的| www.831780.com-怎么建立彩票app| www.956906.com-hk百彩网-| www.cai953.com-快三群里都是托吗| www.506335.com-澳门十佳博彩| www.593752.com-北京七彩国际| www.ps88.com-台湾快三查询| www.857508.com-优酷彩票官网首页| www.963579.com-买足球彩票怎么买| www.ah33.com-彩票中奖十万| www.yv79.com-掌上彩票官网| www.60wy.com-网易彩票赚钱| www.3282.cn-万达彩票网站| www.7yu.com-南国彩票版杀手之王| www.744316.com-288彩票官网下载| www.237244.com-免费彩票大全| www.89735.com-卵巢彩票什么梗| www.121340.com-体彩大乐透选号大师| www.131603.com-云南福彩票-| www.853626.com-好彩快印-| www.915286.com-淘彩网下载地址| GO彩www.gocp2.com| www.547499.com-陕西福利彩票开奖| www.229003.com-易彩快三计划app| www.286655.com-3d彩吧图第三版| www.74637.com-体育彩票种类有哪些| www.130575.com-驻马店结婚彩礼| www.cai2888.com新快三形态走势图| www.108352.com-总是买彩票什么心态| www.245674.com-易彩堂彩下载| www.411109.com-唯彩双色球预测下载| www.561702.com-鸿彩公-| www.0728.date-易彩堂快3技巧| www.450510.com-手机彩宝网查询| www.571164.com-下载734期期好彩| www.163266.com-香港买足彩-| www.383894.com-体彩店宣传语| www.592449.com-太子报彩吧图库| www.770231.com-福利彩票双色球派奖| www.599520.com-中了彩票亲戚借钱| www.774041.com-希腊五分彩官方| www.881954.com-正规的彩票合买源码| www.975424.com-江苏快三漏洞| www.iu14.com-体育彩票吧-| www.83og.com-599彩票投注平台| www.2999.tv-彩票两个平台套利| www.29iq.com-彩票王成周后来| www.1892.com-1号彩票网站首页| www.237751.com-竞彩网计算器胜平负| www.723537.com-常州彩票中奖| www.802658.com-彩界精英独胆双胆| www.874303.com-亿彩彩票时时分分彩| www.949720.com-苏快三大小怎么买| www.990226.com-中体育彩票-| www.ac30.com-解密彩票之谜大揭秘| www.ta48.com-福利彩票一般几位数| www.339296.com-购彩票助手软件| www.835623.com-好彩三八猜一数| www.983246.com-zc众彩网-| www.129265.com-大豪门彩票网址| www.mg86.com-盈彩网是真的吗| www.157856.com-80彩票陷阱-| www.16267.com-比较靠谱的竞彩平台| www.7878.la-吉林快三总共几期| www.bp.cc-安徽快三最新开奖| www.884007.com-快三黑彩怎么不输| www.274561.com-快三输了几十万| www.566284.com-彩世界彩票平台| www.075112.com-兼职瑞彩祥云可以吗| www.227062.com-彩库宝典110| www.72196.cc-彩25-| www.172928.com-甘肃快三形态走势图| www.aq59.cc-贵州彩票11选五| www.68653.cc-乐彩网用户注册| www.25311.com-二四六报彩神童| www.880732.com-手机淘宝网买彩票| www.959390.com-5分时时彩计划群|