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.88691.com-微信钱包没有彩票| www.226344.com-娱乐快三开奖| www.360415.com-龙岩彩民中双色球| www.bo67.com-香港天下彩网网址| www.19kk.com-肥城开个彩票店如何| www.1374.vip-福利彩票系统案| www.9747.vip-彩宝网大乐透预测| www.435554.com-体育彩票选点要求| www.88223.cc-彩民网网址平台| 大赢家彩票平台www.659957.com| www.qx63.com-肖立刚福彩3d推荐| www.cp3575.com-快三助手ios版| www.288785.com-下载全民彩票软件| www.6734.me-手机分分彩app| www.345966.cc-c8彩光-| www.13zf.com-查看彩票中奖号码| www.919.cc-咋申请彩票投注站| www.306611.cc-福利彩票怎么买号| www.033546.com-彩帝彩票安卓版下载| www.1195.cn-福彩组合是什么字| www.05248.cc-福彩3d图表大全| www.578566.com-体彩门店图片| www.059292.com-时时彩开奖号码记录| www.183517.com-中彩票-| www.494812.com-足球竞彩二串一推荐| www.0973.vip-手机彩票投注大乐透| www.62ry.com-义乌体彩招标| www.7681.cm-福利彩票正面| www.509398.com-七星彩宝贝图| www.836598.com-中国福彩报双色球诗| www.005685.com-新浪彩票频道竞技| www.999953.com-江苏快三电脑版走势| www.qi69.com-一定牛体育彩票官网| www.zl79.com-乐彩双色球-| www.581187.com-怎么看福彩走势图| www.723297.com-常州福利彩票店下单| www.823989.com-福彩3d直选3| www.899759.com-彩票号码自动生成器| www.964271.com-排列五彩票筛选软件| 大赢家彩票平台www.136503.com| www.iv39.com-网易足彩推荐| www.e51.club-福彩补拍-| www.34lt.com-首存送彩金的网投| www.qp85.cc-体彩的发行宗旨| www.962154.com-五分彩可以用公式来| www.wn.cc-河北彩票快3跨度| www.719856.com-七星彩复式投注格式| www.158726.com-龙江福利彩票p62| www.259879.com-福利彩票机选号码| www.071911.com-6e6e彩票-| www.200139.com-胜负彩19050| www.7504.com-旺彩注册-| www.jq91.com-360购彩大厅首页| www.813767.com-中国彩票网投注网| www.926160.com-01彩票app苹果| www.353108.com-485彩票-| www.480374.cc-足彩必发指数新浪网| www.118435.com-彩七七平台-| www.697586.com-体七星彩复式怎么买| www.802164.com-彩29网站-| www.885902.com-彩虹屁是花式夸人| www.956209.com-今七星彩开什么码| 8号彩票www.60108f.com| www.id11.com-玩彩票的下场| www.062245.com-欢迎光临台湾福彩| www.412159.com-体彩和福彩开奖日期| www.7446.vip-上海申请体彩开店| www.937.cn-体彩7星彩开奖直播| www.252291.com-彩票网66-| www.13265.cc-足彩倍投-| www.377925.com-体彩店成本-| www.67ab.com-买彩票下什么软件| www.985343.com-nba竞彩网首页| www.859985.com-时时中彩票在哪里下| www.967659.com-呼市福彩中心| www.bq63.com-高倍彩票平台| www.150349.com-全民中彩票官网网址| www.sh97.com-彩app下载送彩金| www.3683.wang-香港6万彩资料| www.47924.cc-山东体彩双彩论坛| www.111164.com-河北快三购买平台| www.269536.com-彩九下载网站| www.426748.com-举报福彩中心| www.369943.com-体育彩票五位数开奖| www.47645.com-腾讯分分彩稳定玩法| www.035673.com-魔方彩票靠谱吗| www.137226.com-网上七彩是骗局吗| www.88795.com-玩彩的聊天工具| www.279631.com-时时彩0369口诀| www.355397.com-彩乃奈奈种子mp4| www.096568.com-体育竞彩app| www.26je.com-彩友圈app下载| www.818749.com-澳客彩票网开奖单场| 购彩在线www.66332w.com| www.711151.com-盈彩纺织-| www.776151.com-快乐彩任选三规则| www.838479.com-各种彩票走势图| www.904247.com-休闲快三分解教学| www.967746.com-玩时时彩心得| 大赢家彩票网www.54400f.com| www.87pl.com-海口七星彩早版论坛| www.2317.com-开空彩票与你同行| www.07529.com-乐彩网摘字谜汇总| www.079036.com-大玩家彩票靠谱吗| www.210081.com-买彩票就这几招| www.19933.cc-华军彩票大赢家软件| www.616296.com-亚上彩游戏官网| www.684652.com-新彩吧福彩图谜| www.760531.com-好彩妹口头禅视频| www.830219.com-顶级彩票网址| www.889195.com-易彩快投注-| www.948879.com-武汉体育彩票转让| www.990412.com-网购彩票下载| www.kb4.com-贵州快三下载安装| www.964831.com-体育彩票和尾值| www.yc.cc-河北快三专家预测网| www.31373.cc-11选五彩票软件| www.349746.com-彩天下唯一注册平台| www.632805.com-七彩平台查分| www.746978.com-大奖彩票官方网站| www.816296.com-快三出豹子多少钱| www.883623.com-奔驰彩票网页| www.957479.com-体彩列五走势图| www.ae1.com-中国福彩开奖查询| www.st73.com-重庆时时彩稳定盈利| www.758915.com-微彩走势-| www.62844.com-彩宝贝排列五走势图| www.150712.com-818彩票是真的吗| www.231320.com-优彩网-| www.136255.com-易彩堂主页下载| www.951431.com-大发快三看走势图| www.68163.com-体彩网电脑版选择| www.601406.com-大乐透酷彩吧真的吗| www.785002.com-福彩快三中了2个| www.906271.com-彩色是不是表示颜色| www.965643.com-一分钟彩票网址| www.491234.com-破解时时彩漏洞软件| www.617828.com-广东福彩3d玩发| www.698228.com-浙江省体彩征召| www.761747.com-彩票开奖千禧试机号| www.830851.com-彩易网下载-| www.886750.com-博彩推广怎么聊天| www.978418.com-好彩店彩票ios| www.cp2700.com-江苏快三彩票合法吗| www.174304.com-今日快三开奖示图| www.799563.com-五分快三猜号技巧| www.bi69.com-彩票江苏快三官网| www.244473.com-达人彩票官网| www.809375.com-博众时时彩软件骗局| www.880086.com-数字三彩票第一规律| www.976023.com-重庆彩礼-| www.493343.com-彩钢瓦房图片| www.ln34.com-送500彩金-| www.26466.cc-长春彩-| www.383234.com-体彩样票制作| www.983474.com-贵州福彩网首页| www.qi32.com-好彩一八解生肖| www.698711.com-体彩高频走势图| www.32267.cc-中国足彩网凯利| www.626327.com-国外彩票大奖排行| www.82366.cc-杭州竞彩快三出奖| www.68ha.com-酷彩吧下载不了| www.781578.com-博彩头头是黑网吗| www.yg02.com-福利彩票奖金计算器|