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.443905.com-36o彩票开奖公告| www.92723.cc-立彩助手安卓| www.625899.com-富华彩票平台| www.723263.com-旭辉研彩软件购买| www.807518.com-博客彩-| www.56py.com-多赢彩票注册| www.948467.com-天天彩票公益资料| www.ka58.com-买彩票炒股不是赌博| www.807882.com-体育彩票赛事直播| www.974579.com-众彩娱乐下载地址| www.53185.cc-七彩建盏图片| www.87272.com-a3彩票可以买吗| www.44243.com-208彩票网客户端| www.444699.com-推店彩票软件下载| www.148454.com-500彩神官网| www.6310.cm-彩报今天老汉图| www.011032.com-腾讯彩票ios| www.6971.me-天空彩65-| www.870514.com-红旗彩票快三精算师| www.tm9.com-彩票站电视版走势图| www.36jq.com-七星彩有试机号码| www.929001.com-中彩网广西福利彩票| www.888960.com-七乐彩现场直播开奖| www.29oc.com-明星彩铅画图片| www.255375.com-内蒙时时彩玩法| www.381190.com-今日七乐彩开奖直播| www.23tt.com-3d家彩论坛杀号| www.755912.com-彩吧论坛众彩网| www.447122.com-福彩女主持人| www.927192.com-福彩3g字谜总汇| www.jt05.com-彩神外挂-| www.4322.biz-江苏福彩电话| www.1kt.cc-彩神计划王-| www.855541.com-南方众彩网3d预测| www.985609.com-安微快三爱乐彩| www.12kh.com-贵州快三和值遗漏| www.89917.cc-彩票网络接单| www.17pz.cc-福利七乐彩-| www.707880.com-快三求回血-| www.490004.com-九州福彩-| www.356470.com-商家送彩票活动| www.169236.com-安徽快三跨度走势| www.329999.cc-河北体育彩票网| www.025443.com-赢彩票与行天下同行| www.125969.com-卖彩票赚钱吗| www.219449.com-快三开奖记录| www.750436.com-豪彩vip跑路| www.840076.com-福彩传统彩是什么| www.959685.com-新盈彩网址-| www.dr3.com-快三跨度怎么看精确| www.oq37.com-中彩票zcp-| www.79335.com-华彩咨询招聘| www.76171.com-彩易科思回收彩票| www.362.red-90彩票合法吗| www.967475.com-彩尊登录-| www.es60.com-新彩彩票平台正规吗| www.vy97.com-兰州彩票店转让| www.06qm.com-qq易迅版彩票| www.81jx.com-足彩胜负彩单注奖金| www.2120.me-苏州福彩中奖信息| www.267718.com-360彩票老快3| www.554647.com-七星彩杀号技巧大全| www.958459.com-微信口袋彩店二维码| www.367920.com-港彩力芽-| www.613740.com-天乐乐彩票网| www.866207.com-腾讯分分彩官方网站| www.5584.win-小彩牛-| www.89608.com-胜负彩4月赛程| www.023184.com-玩重庆时彩输钱的人| www.639670.com-买竞彩输了-| www.797753.com-九九什么彩票| www.920813.com-七彩网是正规的吗| www.095239.com-彩票诈骗怎么处理| www.326297.com-网易彩票开奖号号| www.505007.com-休彩排到五开奖| www.701252.com-彩票输了说给你包赔| www.823305.com-彩涂板厂家-| www.957481.com-248彩票平台| www.cp4748.com-湖北快三多少钱一期| www.789693.com-红彩在线官网| www.663747.com-香港网上彩票赌城| www.773295.com-中国彩票开奖直播| www.947675.com-体彩专家预测| 幸运彩票www.331215.com| www.208532.com-彩票led宣传语| www.2949.cc-励赢彩票靠谱吗| www.08929.com-头条号老谢说彩| www.008731.com-彩客网旧版-| www.50550.com-反水彩票-| www.005933.com-越南时时彩专业版| www.092566.com-河南农村彩礼多少钱| www.221835.com-大发快三开挂下载| www.309707.com-福彩快三跨度走势| www.398573.com-今天七星彩几点开奖| www.532308.com-山东的一个彩票老师| www.631008.com-体彩飞鱼技巧解析| www.89096.com-娱乐网站送58彩金| www.115430.com-彩钢瓦规格-| www.568618.com-阿狸彩票登陆| www.673155.com-体育彩票开走势图| www.762700.com-福利彩票20选5| www.923729.com-秒速时时彩官方的吗| www.997146.com-旺彩彩票-| www.dj34.com-体彩七星彩中奖彩票| www.04jy.com-如何控制大发快三| www.90je.com-抠门博彩-| www.5629.wang-网上买彩票被骗过程| www.002013.com-南方众彩网3d预测| www.285386.com-姜丽花式快三教学| www.838296.com-成都彩钢围挡租赁| www.82ba.com-买彩票世界杯| www.41522.com-玩儿彩票软件| www.086969.com-神彩福牛app下载| www.996751.com-爱彩乐走势图双色球| www.963722.com-网上彩票代理赚钱| www.008458.com-购彩软件可靠吗| www.133145.com-快三怎么买能赚到钱| www.286030.com-福彩幸运彩-| www.505516.com-传统竞彩足球| www.01686.cc-福彩3d组选三复式| www.003892.com-三彩家租房靠谱吗| www.393015.com-湖南福彩动物| www.598857.com-友圈儿能买彩票吗| www.739416.com-体彩站点-| www.876499.com-体彩各种玩法介绍| www.995565.com-北单竞彩比赛结果| www.af74.com-六i和彩今晚开奖结| www.55mj.com-山西体彩6串22| www.440784.com-福彩中心主任视频| www.206119.com-代玩彩票兼职五十块| www.5353.in-怎样彩票-| www.176916.com-单机游戏快三| www.153248.com-158彩票安全吗| www.973472.com-雨后彩虹图片大全| www.737290.com-广西快三方法和技巧| www.ac24.com-彩票36开奖结果| www.758617.com-电玩挣钱软件送彩金| www.893376.com-七乐彩缩水软件下载| www.969349.com-梅州彩票中奖新闻| 13e彩票www.820687.com| www.qm62.com-彩经网排列三字谜| www.1655.cm-足彩大小球升盘降盘| www.70155.com-天空彩票與你同行| www.723592.com-常州福彩-| www.654521.com-心灵码仙七星彩规律| www.698461.com-嘉兴福彩机申请| www.2500.online外围体彩网站哪个好| www.035569.com-关于彩票的英语句子| www.407676.com-新大陆彩票走势| www.522905.com-怎么计算时时彩周期| www.591096.com-ck彩客网-| www.660001.com-酷睿彩票系统| www.721295.com-幸运8五分彩规律| www.777456.cc-彩八仙时时彩苹果版| www.855395.com-彩票励志故事| www.927505.com-内蒙快三360开奖| www.976074.com-论彩礼-| www.cp8888.cc-福彩红快3-| www.15773.cc-零基础学彩铅入门| www.778708.com-8号彩票幸运飞艇| www.xy02.com-709彩票手机版| www.308327.com-彩票投注站网上缴费| www.647006.com-胜负彩窍门-| www.030366.com-购彩app合法吗|