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.339864.com-南方彩票走势图| www.086511.com-彩客竞彩彩票手机版| www.193090.com-内蒙古快三爱彩乐| www.271726.com-丰彩彩票真的假的| www.0240.in-今天东盛彩报| www.6006.xyz-足彩培训师公布| www.bb22.com-喜乐彩十六期开奖号| www.vk32.com-陕西福彩20选八| www.14nf.com-七星彩排列图| www.97ih.com-人生是不是该有彩排| www.2755.pw-广西快三多久开奖| www.7768.com-一般买什么彩票| www.22422.cc-因彩礼钱分手| www.7889.in-天下彩5334-| www.77596.cc-彩票谜语怎么看| www.049918.com-南方双彩网3d预测| www.132404.com-河南开封的彩礼| www.171780.com-精彩十分中奖奖金| www.19xo.com-无锡彩旸香江价格| www.034946.com-大发快三开奖号码| www.931909.com-彩票中大奖图片| www.261959.com-快三遗漏上海| www.598211.com-14场胜负彩销量| www.918711.com-博友彩赚钱是真的吗| www.882444.com-一分彩怎么玩| www.169361.com-快三走势怎么分析| www.545656.com-如何开个彩票投注站| www.131566.com-山东彩礼一般给多少| www.652247.com-彩名堂彩票平台| www.cp9676.com-大中华彩票1分快3| www.157098.com-传统五分彩-| www.56448.com-众彩生活骗局| www.bm79.com-福彩30万都是托| www.cai15.com-湖北福彩快三走势图| www.408485.com-彩票春节放假几天| www.152125.com-怎么攻击彩票平台| www.91238.com-形容房间炫彩的词语| www.659338.com-彩票开奖查询28期| www.242128.com-一号彩票app| www.372508.com-无彩色-| www.557454.com-七星彩开奖等级奖| www.62zw.com-电话购彩票安全吗| www.zm83.com-体彩票福利彩票| www.027560.com-易彩网是正规的吗| www.764.tv-林兴洛福彩3d最新| www.743177.com-彩吧三d开机号今天| www.961498.com-福利彩票刮刮乐英文| www.36933.com-官彩是真的吗| www.820042.com-足彩概率计算公式| www.31653.cc-彩票套利平台| www.zm03.com-浙江福彩快-| www.574563.com-电信爱音乐彩铃退订| www.md1.com-湖北省快三-| www.ar87.com-福彩精彩十分规则| www.5ty.com-新时时彩倍投技巧| www.073780.com-北京新快三查询| www.255750.com-彩民福地-k彩| www.897109.com-彩票最长的龙有几个| www.393962.com-昨天的福彩开奖亏| www.107213.com-体彩走势图带连线图| www.j20.top-福彩双色球跨度走势| www.14jl.com-彩金鲨鱼游戏机价格| www.9089.cm-七乐彩是怎么算的| www.303280.com-2006年福彩和值| www.863022.com-点击更多精彩内容色| www.ch59.com-浙江福彩浙江在线| www.93hq.com-1寸彩照是白色吗| www.087857.com-网络彩票赌博的定性| www.253211.com-时时彩全天计划蜂巢| www.634577.com-博创彩票-| www.27179.com-彩票2元旧版本| www.034034.com-cba篮球竞彩分析| www.9263.top-青岛福彩大厦| www.760933.com-体彩5p开奖结果| www.1881.me-河北体彩竟彩网| www.2961.com-福彩3d财子杀码图| www.105220.com-体彩竞彩官网| www.007227.com-明星彩票app| www.k14.cn-山西省体彩兑奖地址| www.7121.cm-七彩孔雀釉建盏介绍| www.2388.online万彩吧试机号| www.912747.com-彩客网咋样-| www.cp367.com-体彩5排开奖号码| www.19772.com-快三和值13多少钱| www.96.me-爱投彩票提现审核中| www.ud4.com-苏快三-| www.777009.com-锋彩直播苹果下载| 凤凰VIPwww.www.fh7577.com| www.al31.com-查询彩票开奖查询| www.966239.com-福彩投注-| www.83992.com-南国彩票开奖直播| www.582438.com-福彩3d快三146| www.ev70.com-大发时时彩有幕后吗| www.365972.cc-更多精彩后边| www.3146.win-新浪足彩数据| www.271597.com-快三012路-| www.669508.com-七位数的彩票有哪些| www.094878.com-pc手机壳彩印机| www.360263.com-北京新快三一定牛| www.303582.com-好彩客安卓官方下载| www.562957.com-3四彩票-| www.791499.com-开体彩店心得| www.6222.tv-彩票巴巴安卓版下载| www.3ym.com-好多人中彩票的新闻| www.0488.org-体彩门店编号| www.1404.vip-神灯彩票注册| www.229638.com-093彩票注册| www.777109.com-河北体彩网11| www.560622.com-下载棋牌送彩金| www.ab65.com-江苏快三在那开奖| www.34pq.com-3d福彩彩报-| www.24441.com-麋鹿彩铅画-| www.nb21.com-宝马集团时时彩平台| www.241865.com-七星彩胆拖-| www.123975.com-福彩排烈3-| www.411889.com-苹果原彩显示耗电吗| www.935162.com-快乐彩官方网| www.505357.com-重庆时时彩下载官方| www.462387.com-网易彩票大乐透停售| www.83257.com-买彩票几百万| www.760321.com-下载时时彩宝典老版| www.106944.com-中国体彩足球竞彩网| www.647644.com-福彩3d最高中奖者| www.5883.biz-结婚彩礼是什么| www.47pq.com-刚力彩芽个人资料| www.622802.com-福彩模拟摇奖器| www.491.com-时时彩杀一码计划| www.095558.com-彩票店的利润| www.874900.com-酷彩吧app苹果| www.028176.com-什么是快开彩票| www.351719.com-乐彩客足球-| www.07al.com-下载彩票中奖查询| www.015714.com-够力七星彩旧版本| www.188757.com-vip彩票官网| www.663337.com-七乐彩开奖结果| www.85vo.com-网络彩票有什么漏洞| www.163390.com-中彩网广西快三| www.823687.com-36o彩票首页| www.334198.com-福彩通官网-| www.2148.pw-502彩票-| www.405724.com-彩虹的形成原因42| www.59.win-长春彩票站出兑合作| www.094240.com-彩吧第三版图库| www.642087.com-一出好戏彩票| www.266301.com-快三输钱啦怎么戒赌| www.394397.com-最新彩虹世界安卓版| www.087771.com-乐58彩票官网| www.1068.xyz-澳客彩票网盈彩网| www.008.loan-竞彩猫有免费推荐么| www.950067.com-尼彩手机价钱| www.6799.top-胜负彩18151| www.802352.com-竞彩彩民落难| www.55pb.com-云南彩票中奖情况| www.jm91.com-分分彩坑人-| www.kh14.com-大发快三秘诀| www.888966.com-中国体彩自动售票机| www.326855.com-江西快三年爱彩乐| www.883199.com-重庆高中生买彩票| www.16520.com-瑞典2分彩人工计划| www.027211.com-078彩票是真的么| www.206408.com-有人玩神州彩票吗| www.358661.com-下载23彩票app| www.630208.com-266彩票-| www.28761.cc-新快三开奖结果今天|