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.258771.com-体育竞彩app投注| www.393909.com-中国福利彩几点开奖| www.506312.com-如何赌网络快三| www.653552.com-玖亿彩票下载| www.886734.com-微信上那个中国彩| www.aj74.com-七星彩综合走势图| www.98lz.com-博彩交流网-| www.031480.com-038彩票苹果下载| www.8125.top-福彩大乐透走势图| www.883071.com-彩678靠谱吗| www.983879.com-广西彩票兑奖中心| www.bd29.cc-安徽快三夸度走示图| www.016975.com-彩票店的前景如何| www.37712.com-奥克足球竞彩| www.07772.com-课文中彩那天朗读| www.635072.com-七彩国际影城凯德店| www.771810.com-怎么拉竞彩客户端| www.913.tv-海南七星彩梦兆解码| www.131740.com-采彩票开-| www.22.cn-3d彩报图今日| www.727548.com-忆彩网-| www.800827.com-福彩3d天天开奖| www.910063.com-有没有玩胜利彩票的| 天下彩www.545680.com| www.ro89.com-bft彩票-| www.58yh.com-四川体彩官网| www.7122.cn-建盏银兔毫七彩| www.650752.com-十字彩是什么| www.259796.com-京东彩票软件| www.774557.com-快三投注书籍| www.895480.com-联众彩票app| 500彩票www.50051d.com| www.185322.com-广东好彩1-| www.300977.com-彩票排列三九宫图| www.547706.com-彩票七乐彩怎么买| www.75927.com-彩票作废叫什么| www.046007.com-彩81官网-| www.123366.com-中国竞彩网足球比分| www.211911.com-购彩网站北京快三| www.286884.com-中国福利彩票任选三| www.361443.com-易发彩安全吗| www.451519.com-买彩票用那个软件| www.57yx.cc-洛阳体彩转让| www.024634.com-中国福彩网积分卡| www.595055.com-鑫彩网彩神-| www.829680.com-248彩票购票大厅| www.393753.com-彩虹世界百度云资源| www.522628.com-彩票龙虎和技巧| www.432382.com-6118彩票投注| www.033329.com-彩站宝如何发起跟单| www.cp1818.cc-5分快三怎样下载| www.176750.com-江苏快三中奖助手| www.0508.cn-竟彩网站-| www.190093.com-快三基本走势图| www.277901.com-快三单码投注技巧| www.350339.com-台湾运彩官网| www.436643.com-福彩三地历史开奖号| www.526144.com-非法经营体彩判几年| www.340.cm-色彩明度表-| www.747128.com-彩--| www.855697.com-高澜彩票专栏| www.507244.com-彩票世界的永久官网| www.646475.com-各省份快三时间开奖| www.59bb.com-体彩大乐透购买方法| www.875966.com-广西福利彩票结果| www.984606.com-彩虹8彩票平台| www.rh00.com-今日头条专业玩彩| www.49jd.com-彩月鲜花网-| www.1924.net-最火的87彩店| www.751960.com-银彩注册-| www.833225.com-彩票55苹果下载版| www.455685.com-球彩台sam解雇| www.564671.com-佛山彩票没人领| www.784681.com-乐米彩票软件怎么用| www.868100.com-星期三买什么彩票| www.959239.com-彩票中奖排行榜| 大赢家彩票平台www.186327.com| www.590708.com-時時彩走势图带连线| www.320920.com-台湾福彩星奖直播| www.635625.com-7乐彩开桨结果| www.747407.com-红8彩票-| www.567372.com-红彩app官网| www.757608.com-中彩网点数是什么| www.880275.com-福乐彩开奖结果查询| www.948213.com-彩宝网彩票开奖| 大赢家彩票www.5086x.com| www.345249.com-高频彩票走势图大全| www.524435.com-有分分3d彩网| www.3380.cc-沉迷彩票人的心里| www.364.xyz-牛彩网3d预测号码| www.4152.com-福彩3d财神推荐号| www.340466.com-彩票兼职代打靠谱吗| www.422202.com-3d走势图乐米彩票| www.17917.cc-竞彩公告-| www.932811.com-网上买彩票怎么处罚| www.111600.com-大乐透3亿彩票照片| www.rd04.com-彩6官方下载3.0| www.488244.com-甘肃快三双色球| www.545593.com-怎么推广彩票| www.609084.com-彩票店几点开| www.669321.com-彩票单双大小统计器| www.736426.com-保定彩票机怎么申领| www.797145.com-98彩票98彩票| www.854989.com-辽宁福彩3d走势| www.903382.com-上海快三和值跨度表| www.956902.com-欧洲百万彩开奖| www.999190.com-福利彩票中奖数字| www.bb19.com-快三挣钱方法| www.pf88.cc-中华彩票注册邀请码| www.15tw.com-福利彩票站几点关门| www.5547.cm-这期算下期彩票号| www.4ox.com-怎么样买彩票会中奖| www.926708.com-彩票达人论坛| www.781863.com-网络江苏快三黑彩| www.9488.in-彩票选号器软件| www.731945.com-易盈彩app-| www.829508.com-彩聊app-| www.916003.com-怎么开个彩票投注站| www.974821.com-特区彩票-| www.cai0177.com快三彩票开奖查询| www.45698.cc-必发彩票手机版登录| www.62613.cc-七星彩的中奖号码| www.807127.com-彩票有折痕能兑奖吗| www.6940.vip-七星彩杀头定胆| www.061179.com-微信时时彩骗局| www.127094.com-彩铅画图片简单风景| www.083.in-山东十一选五彩票| www.129271.com-体彩大乐透最新规则| www.025816.com-三3d彩吧图库| www.802236.com-精彩片段-| www.884619.com-高频彩真的能赚钱吗| www.952647.com-78彩票app官网| 68彩票www.68689t.com| www.271832.com-江苏快三怎么购买| www.429774.com-利澳平台彩票平台| www.713160.com-香港160彩票| www.882961.com-彩票内部中奖骗局| www.990115.com-布衣天下图库多彩网| www.ol12.com-福彩双色球蓝球推荐| www.37om.com-香港挂牌彩民村| www.780.cm-福彩神牛双色球| 福彩www.26878u.com| www.fi79.com-cp999彩票-| www.982046.com-360彩票对比器| www.ct97.com-大发快三在线投注| www.wr27.com-200w彩票app| www.103274.com-七彩7位数开奖号码| www.162395.com-足彩86-| www.254599.com-数字app彩票软件| www.7918.vip-福利彩票开奖预测| www.651490.com-六开彩怎么才能赚钱| www.928012.com-福利彩开奖直播| www.992045.com-雪缘缘足彩比分直播| www.fy99.cc-福彩作弊国家不管吗| www.p75.net-518实时彩票| www.528032.com-内蒙古破解时时彩| www.635670.com-七彩阳光第三套伴奏| www.782825.com-鸿运彩票骗局大揭秘| www.882913.com-中国彩礼排行榜| www.945395.com-福建省体彩开奖中心| www.cai0277.com中国福彩快3兑奖| www.911855.com-快3彩票下载注册| www.983489.com-彩9彩票下载| www.gv95.com-盈彩网揭秘在线|