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.189854.com-牛彩断组-| www.83324.com-福彩3d中奖高手| www.049400.com-菩萨赐彩票-| www.9265.online乐彩网的计划三倍投| www.696900.com-七星彩数字表| www.653281.com-福彩8炫彩奖金| www.022989.com-福彩3d小图-| www.128940.com-澳彩官方网站app| www.069276.com-下载彩票争霸| www.851635.com-七皇彩开奖结果查询| www.cp487.com-福州快三-| www.125803.com-彩票最新开奖信息| www.967483.com-网络彩票女托| www.329655.com-时彩大平台-| www.151360.com-多乐彩十一选五官网| www.8741.loan-重庆时时彩又卡奖了| www.830784.com-六台彩手机免费资料| www.935600.com-彩票联盟手机红包| www.ym43.com-今日说法彩票骗局| www.903756.com-万豪彩票老版本| www.49507.com-竞彩和外围-| www.733864.com-福彩三d开机号码| www.856503.com-彩果游戏全民竞技| www.cp1600.com-福彩快三外挂手机版| www.ur64.com-买彩网址-| www.9440.cc-福彩3d数字遗漏| www.89206.com-盈彩网注册-| www.118666.com-中国体育彩票如何买| www.47vb.com-爱彩网app真实吗| www.330491.com-足彩让球0什么意思| www.982335.com-精准时时彩计划网页| www.812531.com-福彩3d怎样经领奖| www.930044.com-时时彩高手方法如下| 500彩票www.635477.com| www.636517.com-彩虹4多少钱一架| www.737190.com-甘肃快三投注模拟器| www.904890.com-足球彩票胜负彩开奖| 大赢家彩票平台www.351587.com| www.ut69.com-时时彩客户端| www.223969.com-十分钟福彩中奖技巧| www.259883.com-福利彩票怎么选号码| www.186883.com-中彩网官网-| www.296540.com-彩票双色球开奖预测| www.381205.com-七乐彩33期开奖| www.42080.com-安装彩钢-| www.99266.cc-淘宝可以买彩票了吗| www.519567.com-飞翔竞彩吧-| www.611231.com-彩虹代刷网主站官网| www.692539.com-福彩3d双彩图百度| www.770026.com-七彩西游记在线观看| www.867751.com-七星彩直播开奖网站| www.875500.com-老版腾龙时时彩做号| www.507889.com-传诚彩欢迎您| 亚洲彩www.68568m.com| www.123.tv-彩彩霸高手论坛| www.6417.vip-春秋娱彩票-| www.900073.com-彩51官网下载| www.972594.com-彩铅手绘小清新风景| www.bi5.cc-湖北快三精准预测| www.542189.com-彩票360合不合法| www.90717.com-彩站宝店铺二维码| www.016155.com-彩票开奖视频道| www.238010.com-app发彩网-| www.964036.com-吉林快三是要改版吗| www.cai591.com-快三技巧选号口诀| www.982450.com-下载鸿彩-| www.565010.com-合肥体彩店什么赚钱| www.331384.com-两元彩票网走势图| www.599652.com-买彩票会影响运气吗| www.543028.com-江苏猫彩快三预测| www.449413.com-重庆14彩公司| www.121175.com-微信为什么封彩票群| www.380774.com-天天开彩-| www.144559.com-足彩妖刀最新推荐| www.280770.com-怎样预测时时彩豹子| www.256751.com-彩票概率分析软件| www.467056.com-足彩比分最准预测网| www.556386.com-七星彩开奖新浪表| www.630307.com-浙江体彩飞鱼分析| www.6pu.com-彩票中奖公司| www.958349.com-发大财彩app| www.271326.com-好彩柠檬双爆珠| www.153572.com-k彩彩民福地| www.255549.com-七星彩中奖规则图表| www.643883.com-中华彩票网网易| www.386597.com-579彩票网-| www.490702.com-淘宝彩票合法吗| www.565480.com-彩吧图库l-| www.631935.com-七星彩预测计划网址| www.699716.com-彩票5是骗人的吗| www.164470.cc-老品牌天天彩票| www.6wl.cc-过年为职工发彩票| www.88yq.com-热购彩票官网| www.3000.net-正彩登录-| www.8723.shop-网易足球彩票| www.52281.cc-好彩票a-| www.91796.com-彩票好彩-| www.38yu.com-用彩铅画画-| www.398369.com-七星彩还未开的好| www.461805.com-cb8彩宝安全吗| www.559025.com-彩票中大奖还工作吗| www.657545.com-澳客彩票网3d杀号| www.728003.com-彩票趋势指标详解| www.802416.com-体育彩票胜平负机号| www.839394.com-七乐彩五期选号法| www.892611.com-彩票27-| www.949260.com-体育彩票经营理念| www.984842.com-体彩最新选号法| www.cp321.com-牛彩湖北快三走势图| www.00885.cc-乐彩专家论坛下载| www.55.me-卡姿兰彩妆代理| www.73qi.com-彩票实战技巧丛书| www.cp3874.com-福利彩快三是什么| www.qn37.com-绿好彩多少钱一包| www.jw4.cc-快三投注顺口溜| www.30mq.com-四季型人色彩测试| www.581.net-时时彩日赚5万规律| www.605049.com-3d复式中奖彩票| www.560327.com-kk彩票平台-| www.mn23.com-幸运彩票害死人| www.128848.com-彩虹旗泡弟弟| www.330540.com-吉林快三微信群正规| www.285049.com-彩票追杀系统| www.458040.com-体彩联盟-| www.569292.com-今天银海彩报图| www.673178.com-体彩任九规则| www.830259.com-pk567彩票-| www.338883.com-宣城福彩中心| www.6779.com-彩票对子什么意思| www.18110.cc-足彩竞猜比分技巧| www.1985.top-竞彩2串1打水| www.120726.com-彩投注站app| www.472.xyz-时时彩技术交流| www.321177.cc-透视彩票眼镜| www.rs04.com-买七星彩能中大奖吗| www.7792.pw-珐琅彩工艺-| www.121845.com-澳洲时时彩历史开奖| www.hw33.com-浙江体育彩票大乐透| www.328.cm-银海彩票彩吧图库| www.c5.me-好彩网络骗局| www.986787.com-体育彩票是几位数字| www.cn74.com-云南彩票十一选五| www.87284.com-澳客竞彩彩票app| www.086670.com-福都彩票app| www.276777.com-2019彩票政策| www.477251.com-7星彩每周开奖时间| www.692940.com-福彩帐号平台下载| www.766456.com-福彩3d杀码图今天| www.848778.com-彩票微信-| www.903030.com-孕之彩-| www.958536.com-彩票主任被判刑| www.992455.com-期星彩开奖结果查询| www.cp3878.com-快频彩湖北快三| www.628.in-彩票直通车图片| www.10772.com-竞彩篮球群-| www.59869.com-彩吧开机号试机号| www.519229.com-彩艮乐千禧3d| www.el16.com-一分快三免费下载| www.040578.com-中彩票预兆-| www.496306.com-怎样看七星彩走势图| www.561501.com-掌上赢彩官网| www.751274.com-博牛彩票是骗人吗| www.816291.com-吉林省福彩快三预测| www.915343.com-粤淘彩票可信吗|