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.745991.com-有几个彩神8| www.065357.com-重庆实时彩历史开奖| www.8305.vip-彩友吧彩民的家| www.0096.cn-霸气的彩票名称| www.137686.com-亚洲彩票下载| www.tp23.com-彩之家邀请码| www.374351.com-彩票3d三地胆| www.6326.org-有正规的彩票网站吗| www.201801.cc-江苏快三骗-| www.301668.com-福彩三d开奖走势| www.188974.com-彩票内蒙古快3| www.385766.com-新版132彩票官网| www.721004.com-数学家破解彩票| www.803650.com-高频彩背后黑幕众多| www.883556.com-彩票梦想站安卓版| www.107103.com-凤凰彩票可以开挂吗| www.202008.com-分分快三预测网站| www.0871.pw-博彩存送优惠论坛| www.145818.com-中国彩吧走势图| www.246860.com-上海体彩网官网站| www.329171.com-网上快三计划都是坑| www.424048.com-新乐彩骗局-| www.555585.com-万彩吧火爆四肖| www.625285.com-七星彩票出的号码| www.698998.com-怎样教少儿彩铅画| www.779764.com-赌博游戏彩票机| www.860773.com-好彩1871铁盒| www.928510.com-七星彩中奖规则明细| 网易彩票www.26163t.com| www.kn71.com-三合皇彩票-| www.21xe.com-盛世彩票导-| www.693135.com-国外彩票代购网| www.779020.com-竞彩高赔买法| www.339308.cc-思乐彩票督导员| www.243464.com-7彩票-| www.5920.online彩礼钱超过3万拘留| www.663580.com-香港天空彩票| www.060714.com-彩吧彩民之家| www.220700.com-彩神争霸8-| www.314254.com-时时彩这么玩| www.kb1.cc-江苏十一选五控彩票| www.306021.com-信誉好彩票平台| www.863589.com-彩票数据抓取| www.99293.com-玩天天彩票技巧| www.584.pw-玩彩对刷怎么赚钱| www.45194.com-万博网上彩票投注| www.2095.in-微信好友彩票诈骗| www.17176.com-体彩时段报表| www.612391.com-uc彩票网可靠吗| www.86602.com-中国梦想彩票触屏版| www.632.pw-彩票平台挣钱办法| www.9487.com-单彩钢板多少钱一米| www.55370.com-时时彩最佳打法| www.011015.com-易迅彩票下载| www.081567.com-梦见自己中彩票6亿| www.6823.com-d东盛彩报2-| www.422757.com-双色球积分换彩票| www.561054.com-彩票中奖所得计算| www.99xc.com-大乐透专家杀号凤彩| www.314128.com-中彩网北海3d预测| www.176252.com-湖北快三单期计划| www.15mn.com-彩虹电影台手机观看| www.551794.com-彩票台子送彩金| www.052187.com-彩票合买有平台吗| www.893484.com-乐彩网破解器| www.r58.top-搏大彩票-| www.73pp.com-彩易手机版-| www.2535.cm-彩筑什么意思| www.8434.xyz-玩彩票怎么玩不赔| www.55bw.com-银彩通电话投注| www.0092.cc-买彩票用什么名字好| www.00867.com-3d乐透乐彩吧论坛| www.118799.com-哪个彩票最容易中| www.637209.com-彩虹6号在哪里下载| www.739924.com-22彩票网站网址| www.817292.com-ig传统彩平台大全| www.982705.com-67彩下载-| www.hw89.com-福彩快乐十分走试图| www.505368.com-快乐彩11选五上海| www.088922.com-123彩票合法吗| www.131593.com-重庆秀山结婚彩礼钱| www.236815.com-彩票兑奖时间| www.333743.com-微彩中奖能提现吗| www.893787.com-财神爷彩票网址下载| www.12qy.com-8亿彩官网下载苹果| www.028476.com-大发快三是黑彩吗| www.188586.com-爱彩乐app下载| www.260638.com-快三和值9赔多少| www.853741.com-天津彩票快时时彩| www.955430.com-2018年彩票开奖| www.rz31.com-优信彩票大发快3| www.85tn.com-福利彩票门头挣钱吗| www.786547.com-下载全民赢福彩| www.872204.com-贵阳市体彩管理中心| www.950469.com-乐彩客平台-| 优点彩票www.137101.com| www.947974.com-四川体育彩票| www.998284.com-中国正规彩票有哪些| www.cj42.com-安徽快三奖金图| www.566936.com-彩神争网址-| www.669246.com-彩票专业选号器| www.335575.com-广西省福彩兑奖中心| www.011052.com-下载网彩-| www.670769.com-彩米科技招聘| www.811987.com-新加波天天彩资讯纲| www.916907.com-天下彩票一-| www.998951.com-永乐彩票-| www.gh95.com-福彩快3软件哪个好| www.397082.com-体彩一分钟开一次的| www.403899.com-彩神挣霸8-| www.ns67.com-彩票平台如何报警| www.971556.com-彩票手机报-| www.03710.com-人一定要买彩票| www.8573.xyz-ok精彩是几线杂志| www.63955.com-澳洲f1赛车彩票| www.878559.com-体彩福彩开奖日| www.959501.com-易彩快三攻略| 万历彩票www.77114a.com| www.510505.com-彩虹的约定儿| www.95922.com-彩票中奖喜报图| www.048781.com-福彩3d一年多少期| www.257244.com-中彩票后的真实故事| www.392390.com-彩票丢了还能兑奖吗| www.603158.com-彩6官方苹果下载| www.719557.com-微彩吧骗局-| www.169582.com-甘肃快三的走势图| www.890011.com-nba竞彩篮球网| www.88hd.cc-黑彩不怕黑客入侵吗| www.2551.cc-如何画彩票k线图| www.8705.vip-快频彩票官网通告| www.963258.com-550彩票-| www.ek3.com-中彩网网址-| www.314622.com-七彩冰球官网下载| www.404578.com-乐彩双色球诗谜汇总| www.529060.com-上海体彩店转让| www.629611.com-188彩-| www.692626.com-中国移动积分兑彩票| www.779381.com-哪种彩票最简单| www.76bc.com-丰汇稳彩-| www.1644.vip-阴阳福彩3d-| www.6661.cn-帝王彩集团-| www.990094.com-3d字谜多彩网| www.081079.com-贵州快乐彩开奖结果| www.636092.com-彩虹四无人机价格| www.150669.com-体彩选号缩水软件| www.962075.com-大彩网抢红包| www.493084.com-彩票精准粉-| www.080328.com-财神8彩票网合法吗| www.261422.com-彩票源码搭建一条龙| www.364399.cc-微博彩票是什么软件| www.715311.com-富裕彩票-| www.872748.com-彩票随机数字规律| www.mh48.com-怎样下载亚博彩票| www.456742.com-k彩彩民中奖福地| www.275982.com-各种釉彩大瓶在哪儿| www.446770.com-彩优微电子怎么样| www.007914.com-上海天天彩选4开奖| www.168935.com-内蒙快三内蒙古快三| www.313517.com-彩票预测资讯| www.2lu.cc-1314彩票-| www.671434.com-彩500正规吗| www.98501.com-qq分分彩开奖统计| www.cp3771.com-北京快三路线| www.889096.com-竞彩彩店宝app|