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.gs28.com-快三倍投方案大全| www.15bf.com-东北娶媳妇彩礼钱| www.7287.in-ig官方彩-| www.394844.com-福利彩票直播现场| www.6508.net-2019七星彩票| www.121995.com-福彩副主任鲍学全| www.184832.com-湖北快三预测软件| www.620298.com-竞彩亚盘怎么玩| www.808946.com-彩票必赢软件| www.965439.com-兼职江苏快三| www.79rq.com-彩票一个亿交多少税| www.60140.com-彩票交税规则| www.110838.com-98098彩票网| www.941016.com-福彩网代理邀请码| www.15889.com-上诲快三-| www.685667.com-老北京彩吧-| www.842079.com-足彩直播现场| 福彩www.16878m.com| www.85il.com-派彩电视电子走势图| 126彩票网www.009275.com| www.175973.com-一分快三走势图| www.ql70.com-博牛彩票登录| www.281614.com-时时彩专业破解器| www.752389.com-网贷买彩票-| www.73ni.com-天空彩开码开奖结果| www.976.space-七星彩一等奖领奖| www.35252.com-七天彩大发快三| www.089367.com-彩票套利是不是骗局| www.028647.com-排列三乐彩网断组| www.885333.com-爱心彩票网是真的吗| www.0558.la-昨天福彩3d老汉图| www.528918.com-亿彩票安全吗| www.119965.com-福彩投资论坛| www.7gj.com-买彩票从来不中奖| www.69wi.com-俄罗斯彩票有几种| www.h76.net-竟彩新规-| www.568443.com-掌上京彩-| www.334.biz-35福利彩票下载| www.841368.com-彩妆盘发美甲加盟| www.921708.com-m8彩票注册邀请码| www.nv16.com-亚洲彩票能挣钱吗| www.081577.com-七星彩一般去哪买| www.784883.com-七星彩今天开奖| www.933786.com-中奖彩票到哪里兑奖| www.w33.cm-乐彩神是真的假的| www.057095.com-安徽快三王-| www.397417.com-钓鱼彩票网站搭建| www.983475.com-天津时时彩官网| www.1215.cc-彩神v下载苹果| www.676985.com-黑客进入彩票| www.380778.com-娱乐首充送彩金| www.621493.com-福利彩票25万| www.770658.com-老时时彩彩票走势图| www.906448.com-吉林快三网盘申请| www.xu.com-网上能买快三吗| www.y42.cn-5o0万彩票网首页| www.526359.com-美国彩票收入| www.698078.com-杭州市体彩中心地址| www.6380.top-企鹅直播平台竞彩猫| www.366870.com-彩铅画多肉虹之玉| www.577353.com-体育彩票复试计算器| www.675142.com-澳洲三分彩开奖网址| www.770494.com-买福彩双色球的技巧| www.850733.com-带玩快三-| www.908071.com-俄罗斯1分彩的计划| www.965843.com-17彩票-| 天下彩www.245568.com| www.hr17.com-好彩客苹果版下载| www.l86.com-河北快三技巧顺口溜| www.366395.com-甘肃体彩中心兑奖| www.687060.com-体彩排三排五论坛| www.960441.com-起他走彩帝-| www.ag56.cc-132彩票安卓官网| www.29qk.com-昨晚竞彩开奖结果| www.671421.com-众乐彩是黑平台吗| www.752760.com-彩票如何刷流水| www.824342.com-三彩服装怎么加盟| www.887239.com-天天购彩网安全吗| www.948749.com-福彩的种类-| www.988866.cc-千禧彩票导航| www.os3.com-今日西宁快三走势图| www.rf63.com-极速时时彩开奖查询| www.547849.com-上海快三算号神器| www.503232.com-湖北体彩网开奖查询| www.579062.com-老虎机彩金可以调吗| www.653458.com-49c彩-| www.712316.com-e彩票客户端| www.777717.com-乐艺彩票-| www.842918.com-福利彩票的发行原则| www.905372.com-网络足彩-| www.962402.com-百度选彩票号| 好彩头彩票www.23579f.com| www.633433.com-买彩票到哪里买安全| www.cp5252.com-北京福彩网-| www.909819.com-五分快三彩票平台| 金利丰彩票www.555958.com| www.954547.com-中中彩网走势图表| www.460052.com-5颗星彩票下载安装| www.cp0798.com-中国最大快三网站| www.36675.cc-盛彩彩票平台怎么样| www.707323.com-网赚快三-| www.366611.com-33期福彩双色球| www.895530.com-彩票那个网站有合买| www.cl44.com-安徽福彩中奖情况| www.ak73.com-七星彩晴予-| www.957714.com-福彩和体彩合并| www.xu09.com-彩票只买一注| www.4386.com-成功彩票对打套利| 8号彩票www.60108e.com| www.87dm.com-彩票大师的博客| www.zl85.com-大发彩票设局害人的| www.181982.com-大发快三官方网站| www.058635.com-3d东盛彩报今天| www.848359.com-彩三八彩票-| 大赢家彩票平台www.785382.com| www.138.tv-花式彩虹屁-| 金彩www.985jc.com| www.318584.com-江西快3爱彩乐| www.420111.com-955彩票手机版| www.549411.com-138彩票下载| www.559879.com-彩票收藏网-| www.79lb.com-图谜汇总3d牛彩网| www.6503.top-斗牛彩票主管| www.20355.cc-下载江苏快三趋势图| www.717941.com-体育彩票世界杯赔率| www.797339.com-九八彩票-| www.876540.com-大彩网3d走势图| www.940042.com-重庆彩票幸运农场| www.984460.com-体彩大乐透摇奖时间| www.ec75.com-返回百姓彩-| www.870608.com-网络竞彩实体店| www.933954.com-福彩3d开奖时间| www.980784.com-附近卖福利彩票站| www.cp452.com-一分快三和值怎么玩| www.hm91.com-北京福彩快三走势坉| www.ud06.com-123彩票官方网站| www.927807.com-彩票306安卓安全| www.998327.com-pk彩票登录-| www.cu33.com-福彩3d淘宝网| www.xq18.com-体彩11选五技巧| www.04pv.com-体彩七星彩预测推荐| www.74wz.com-3d彩票分析器| www.0632.bid-快2彩票走势图| www.4748.org-彩票捐款排名| www.8633.top-派彩乐-| www.29bn.com-赛后赛果及派彩| www.755.bid-新重庆时时彩遗漏| www.85202.com-济南福彩体彩站转让| www.356907.com-过生日可以送彩票吗| www.236823.com-中国体彩官方下载| www.314489.com-足球彩票怎么算中奖| www.393702.com-竞彩网触屏版首页| www.141267.com-糖果彩球图片| www.221919.com-高频彩票或被叫停| www.292168.com-米聊购彩大厅| www.350840.com-连连中彩票-| www.13666.cc-希望彩票官网| www.64mp.com-淘宝彩票和网易彩票| www.654061.com-东方心经彩图资料| www.810881.com-彩盈怎么登陆| www.891013.com-彩尊下载-| www.979570.com-快三豹子算红的不| www.ch75.com-福建省福彩网| www.tw81.com-大乐透彩票投注大厅|