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.2448.com-2分彩开奖记录| www.61372.cc-七星彩头尾购买网站| www.480321.com-怎么算七星彩票| www.580756.com-高反水彩票-| www.ml1.com-如何查福利彩票开奖| www.18aj.com-七乐彩最新预测号码| www.17126.com-体彩价格-| www.363769.com-古风彩虹漫画| www.043680.com-篮球彩票什么软件好| www.033286.com-彩票斩龙方法| www.26176.cc-雨后彩虹看图写话| www.97070.cc-新浪竞彩盈亏指数| www.965223.com-体彩站加盟-| www.112381.com-彩票送18元-| www.830660.com-易彩票手机版下载| www.962777.com-乐彩网摘文集| www.ei88.com-快频彩票有哪些| www.01mh.com-表示彩虹的词语| www.0166.cn-中彩网字谜专区| www.9702.cm-彩店宝下载官网下载| www.gk68.com-彩礼谈判技巧| www.358144.com-谁有博友彩邀请码| www.709138.com-1305彩票是什么| www.899498.com-大星彩票-| www.hq79.com-派彩网app手机版| www.966044.com-双数开彩什么动物| www.48sb.com-福利彩票内部讨论| www.495529.com-彩漂液伤衣服吗| www.388561.com-彩票大管家山东版| www.274712.com-腾讯博彩怎么玩| www.776577.com-糖豆休闲快三第一套| www.875106.com-网易彩票app真假| www.980065.com-七星彩直码透露| www.dc60.com-8彩在线-| www.1wz.com-彩色打印机家用| www.yj97.com-一分快三倍投计划表| www.881611.com-辉煌彩票下载| www.972487.com-游彩网app下载| www.065677.com-必赢彩票案件| www.18616.cc-澳超竞彩推荐| www.957737.com-揭露时时彩骗局| www.cai9299.com加盟吉林快三| www.pv35.com-长城彩票挣钱真假| www.12ja.com-彩色的非洲聆听造句| www.83vf.com-掌上购彩怎么看走势| www.363636.cc-易彩快三破解版下载| www.889557.com-高频彩票对刷| www.996982.com-乐盈彩票官网| www.kx36.com-福彩快三爱彩乐| www.4nw.cc-爱彩比分网-| www.1750.wang-鸿彩主播小浪| www.8718.bid-重庆时彩缩水| www.81808.com-玩快三能赢钱吗| www.212648.com-私彩搭建-| www.322075.com-长春彩票兑奖中心| www.444676.com-ff14彩票周六| www.044294.com-体彩排三中奖规则| www.716311.com-七星彩机选模拟器| www.925611.cc-金彩网是合法的吗| 网易彩票www.07163n.com| www.rg05.com-168彩票真的吗| www.35hl.com-彩票分析新版| www.3451.pw-免费彩金注册就送| www.19669.cc-彩霸王3d彩票论坛| www.980218.com-彩77官网苹果版| www.019296.com-体彩中奖查询器| www.235299.com-福利彩票怎么买| www.639844.com-趣头条彩票推广| www.71606.com-福彩快三驾吗| www.008900.com-体育彩票超级大乐透| www.5885.cn-体彩三句话更新| www.45155.com-缺钱买彩票-| www.90011.cc-福彩3d定独跨| www.075510.com-荣成彩票二等奖| www.85080.com-成都福彩店转让信息| www.165971.com-快三计划网页| www.255869.com-彩票分多少种| www.221.me-卖福利彩票多少提成| www.8680.biz-体彩七星19011| www.42534.com-手机分分彩挂机软件| www.8238.pw-莱利彩票是什么| www.67uj.com-购竞彩app-| www.659574.com-新彩网6-| www.761611.com-复式彩票双色球开奖| www.31865.com-足球胜平负竞彩| www.103011.com-越战越勇中两次彩票| www.302004.com-海南特区彩票网| www.8904.vip-南通竞彩网点查询| www.332438.com-网上彩票代理平台| www.474062.com-福彩3d怎么学| www.579472.com-福彩3d开笑-| www.682575.com-快彩网app官网| www.797827.com-三d分析预测彩吧| www.898351.com-彩票刷分红靠谱吗| www.hn59.com-足彩入门教程| www.14iu.com-辽宁体彩联系电话| www.113351.com-八卦推算彩票| www.362.website90彩票网站-| www.259.live-湖南福彩电子报| www.484364.com-好彩票苹果app| www.100423.com-官网易盈彩票| www.166657.com-快三助手安卓版| www.336300.cc-彩票网提现不了| www.188268.com-安徽福彩快三预测| www.277283.com-彩票到底是真还是假| www.5154.biz-美高梅快三-| www.375621.com-五星电玩城彩金| www.244259.com-竞彩完场比分| www.334546.com-彩票提现账户异常| www.522359.com-腾讯分分彩避免连挂| www.663111.com-印尼5分彩技巧| www.766517.com-福彩快三倍投计划| www.874622.com-仁信彩票网站平台| www.406951.com-彩票站装修图片大全| www.567107.com-彩虹画法-| www.709100.com-加盟彩票-| www.505268.com-彩票几天开奖| www.22910.com-王者彩票在线| www.911690.com-南国体彩特区论坛| www.970163.com-安全的购彩平台| 金掌柜www.83993i.com| www.730381.com-玩彩经验-| www.798180.com-易彩乐平台-| www.860252.com-手机时时中彩票| www.918473.com-彩票网模拟投注器| www.970622.com-迷彩兔app-| 500彩票网www.65707l.com| www.bo39.com-152彩票是否正规| www.rq82.com-河南彩色透水混凝土| www.433364.com-福利彩票双色球猜谜| www.499661.com-韩国有名彩票| www.598695.com-有人买彩票中奖的吗| www.663122.com-凤凰时时彩平台注册| www.zl64.com-三分时时彩计算公式| www.158151.com-新浪网彩票首页官网| www.703978.com-彩神王成周怎么样了| www.773462.com-鸿运彩票软件| www.282871.com-ios版彩票33| www.646644.com-足彩亚盘技巧口诀| www.766884.com-青蛙彩票的资料大全| www.30iw.com-十分彩开奖-| www.877534.com-时时彩专家网| www.000386.com-陕西福彩20选8| www.25vj.com-体彩大管家-| www.7618.xyz-爱彩人ios-| www.22574.com-齐鲁彩票开奖查询| www.616825.com-彩天堂账号注册| www.404326.com-彩铅卡通狗教程| www.498577.com-分分彩倍投技巧| www.532695.com-无惨三国星彩中| www.251133.com-彩8彩票安卓旧版| www.38330.com-酷彩吧正规吗| www.90234.com-七彩图趣味看图测彩| www.81ca.com-足彩比分串最划算| www.817620.com-p3试机号彩吧助手| www.325592.com-福彩3d狂想字谜| www.34878.com-购彩v下载-| www.79379.cc-四川省福彩快乐12| www.028651.com-排列三乐彩网走势| www.127670.com-彩虹主刷网搭建| www.931907.com-体彩门头-| www.0874.bid-福彩双色球开奖预算| www.17mv.com-彩票私盘违法| www.801233.com-富民彩票破解软件|