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.180278.com-哪种彩票一分钟一开| www.216639.com-竞彩足球胜平负计算| www.977568.com-彩票截止时间是几点| www.1729.com-鸿彩主播梦的直播间| www.42424.com-709彩票新版| www.410008.com-唯彩看球开奖| www.5456.me-谁有好的彩票计划群| www.910858.com-87彩店-| www.410745.com-体彩对奖规则| www.88jj.cc-七彩电量颜色软件| www.ua56.com-江苏快三倍投技巧| www.18724.com-彩票站快三速查式样| www.791120.com-游戏娱乐申请送彩金| www.40549.com-中彩彩票qq群| www.65583.cc-好彩1预测广东| www.378844.com-36选7好彩3预测| www.253.cm-高频彩票整顿| www.382287.com-我想中彩票我急缺钱| www.597103.com-彩票怎么选号容易中| www.755523.com-湖北快三购买平台| www.16rw.com-体彩开奖号是什么号| www.8843.me-蓝狐计划博彩| www.767482.com-彩票投注网站哪个好| www.706880.com-东营体彩中足球彩票| www.923454.com-竞彩服务器-| www.38fy.com-王刚讲故事彩票王| www.842.org-旧版彩库宝典苹果| www.ly99.com-极速时时彩怎么玩法| www.5678.top-福彩3d近期竞彩| www.20194.com-彩票漏洞稳赚钱| www.779912.com-砺儿7乐彩推荐号| www.974325.com-福彩票开奖公告| www.5577.me-d8购彩下载-| www.229044.com-好彩门天下彩| www.562959.com-爱米彩的网站| www.51681.com-竞彩计算器足球| www.81xc.com-赢彩网怎么样| www.663656.com-大众彩票网官方端口| www.888068.com-11选5爱彩乐广东| www.268030.com-湖北快三实时分析| www.812631.com-龙江体育彩票| www.998103.com-宁夏快三怎么中奖| www.34ub.com-七星彩出相同号码| 亿发彩票www.370933.com| www.026371.com-海南私彩平台| www.193191.com-贵州快三结果查询| www.333905.com-彩票报纸电子版| www.662091.com-美高梅彩票-| www.196857.com-福彩30选7-| www.357982.com-重庆实时彩软件| www.01287.com-足彩胜负彩历史开奖| www.006982.com-分分钟快三有规律吗| www.1501.pw-腾讯彩票下载ios| www.82454.com-福客来彩票网址首页| www.343355.com-大连体彩网点查询| www.789101.com-十四场胜负彩039| www.790575.com-网络快三是不是黑彩| www.22qp.com-梁宏达彩票-| www.097356.com-福彩3d开试机号| www.26162.cc-比喻彩虹像什么| www.918171.com-私彩投注改单| www.778596.com-釉中彩釉上彩哪个好| www.115744.com-彩铅风景画视频| 818合彩www.www.8000hc.com| www.71504.com-河南省福彩在哪兑奖| www.066707.com-彩宝app官方下载| www.177291.com-福彩店快三-| www.348756.com-彩神安徽快三下载| www.804408.com-秒速时时彩网站源码| www.gc06.com-上海快三开一定牛| www.cp5322.com-大发快三全天计划表| www.0383.org-最大的彩票网站| www.732890.com-19050期体彩| www.6302.xyz-彩涂卷图片-| www.362882.com-雨后现彩虹看图写话| www.770207.com-好彩网挣钱是真是假| www.370555.com-中博彩票分分快三| www.126864.com-菠萝彩3d选号魔图| www.480091.com-奥奥客竞彩网| www.608075.com-中彩网3d试机号后| www.681114.com-福彩开奖录像| www.48286.com-云南省福利彩票中心| www.w13.xyz-湖北体彩站点查询| www.88762.com-体彩排列三胆码分析| www.080530.com-8彩网-| www.261372.com-98彩票登入-| www.562953.com-体育彩票直选3中奖| www.26fm.com-彩票站投入多少钱| www.775239.com-彩名堂4.0手机端| www.963461.com-足彩胜负14场概率| www.967381.com-微信彩票群规| www.0751.xyz-快三做号-| www.618234.com-体彩丹东彩吧| www.64990.com-微信好友拉我玩竞彩| www.2gf.com-彩神五星独胆软件| www.06089.cc-体彩竞彩网官网首页| www.039360.com-爱投彩票怎么玩| www.294136.com-越南彩票结果查询| www.12006.com-彩米彩票app| www.393521.com-长春体彩到哪里兑奖| www.626360.com-鑫彩美缝剂价格| www.955833.com-仲博彩票手机安卓版| www.098851.com-最近彩票中奖新闻| www.209309.com-河北福彩排列五| www.675897.com-温州595万彩票| 金凤凰彩票www.404677.com| www.b15.club-福利彩开奖时间每周| www.28561.cc-彩票计划潮信群骗局| www.118988.com-快三234下期预测| www.983226.com-盈彩吧安全吗| www.7261.loan-欢乐彩安卓版下载| www.9768.org-直播号网易彩票| www.711446.com-竞彩篮球让分500| www.296433.com-福彩3d吧百度吧| www.3029.vip-5050彩票首页| 双彩网www.629012.com| www.657548.com-大乐透彩之家| www.799629.com-新人送彩金的彩票| www.963511.com-网上可以买足球彩票| www.460877.com-皇冠彩票代理| www.933183.com-手机上玩快三犯法吗| www.802869.com-长沙体彩中心地址| www.qo49.com-北京福彩网快3| www.74yz.com-中了七星彩去哪领奖| www.270540.com-幸运快三怎么玩法| www.961276.com-8号彩票官网登录| www.127078.com-彩铅画真人-| www.19602.com-中彩网统计走势图表| www.846320.com-赛事资讯竞彩网| www.959468.com-易彩快三作弊器| www.wv2.com-快三号码表-| www.c70.com-彩站专用电视走势图| www.1684.tv-北京28彩票软件| www.n50.shop-福彩快3玩法规则| www.64sw.com-彩票公益金在中央| www.576453.com-必发彩票下载地址| www.726746.com-彩授网专业彩搜彩票| www.707627.com-签到赚钱娱乐彩票| www.843344.com-体彩顶呱刮一等奖| www.954932.com-相亲彩票诈骗套路| www.ek0.com-快三跨度怎么算| www.wr76.com-567好彩-| www.924980.com-快三app官网| www.189474.com-八八彩票-| www.865753.com-981彩票-| www.974934.com-彩票查询结果七星彩| www.hz72.com-安徽体彩七位数| www.zc43.com-做彩票聊天话术案例| www.639502.com-彩票店吧台设计| www.575.me-玩私彩多少金额违法| www.999748.com-快三012路查询表| www.129896.com-南国彩票论-| www.4975.vip-中澳彩票靠谱吗| www.z12.club-京彩生活app| www.022269.com-8彩神争霸ll| www.6175.cm-现在开彩票店赚钱吗| www.15798.cc-少儿彩铅画图片| www.691819.com-福彩e乐福app| www.6756.org-彩票聚合咨询门户| www.18586.com-彩票那种是三位数| www.899029.com-湖北快三难度| www.vq16.com-福彩二等奖多少钱| www.702662.com-v8彩票提现不了| www.766579.com-聚鑫彩票骗局揭秘|