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.fg9.com-时时彩软件app| www.12860.cc-彩票兑奖要几天| www.575643.com-九九网络彩票| www.442253.com-各地结婚彩礼顺口溜| www.624022.com-福利彩票漏洞事件| www.826940.com-腾讯三分彩官网| www.fk48.com-快三挂机投注| www.143689.com-福彩3地图迷新彩吧| www.150107.com-国民彩票手机登陆| www.358960.com-体彩幸运选号| www.82113.com-红彩快三邀请码| www.7052.pw-体彩多乐快-| www.54424.com-优酷彩票是真的吗| www.82225.com-香港竞彩快三| www.060342.com-快三预测算法| www.214290.com-秒速时时彩开奖图| www.315666.com-网上重庆彩是骗局么| www.q04.site-彩票3d怎么玩法| www.567938.com-迅盈彩票提款失败| www.133624.com-8亿彩苹果版下载| www.137749.com-567彩票是真的吗| www.rp08.com-体育彩票十分钟| www.664907.com-福彩三d天吉图谜| www.759234.com-体彩开奖规则| www.845945.com-博纳彩票网址| www.933725.com-东彩娱乐是真的吗| www.989321.com-360彩票软件| www.uf3.cc-下载百宝彩湖北快三| www.ue73.com-代玩彩票是真的| www.406988.com-七星彩资料统计吧| www.520729.com-爱乐透彩票走势图表| www.759848.com-云彩生活无纸化彩票| www.829055.com-正规彩票app软件| www.894951.com-时时彩助手苹果版| www.959454.com-彩票微信群二维码| 亚洲彩www.68568g.com| www.o96.net-彩票中奖离婚| www.42el.com-七星彩排列五工具| www.8736.wang-高频彩怎么开奖的| www.1375.org-树的水彩抽象画| www.433119.com-甘肃福彩票-| www.91488.com-炫彩手机壁纸大全| www.582061.com-体彩竞彩足球直播吧| www.8890.tv-竞彩平局单-| www.356142.com-分分彩购买软件| www.989837.com-生日幸运数字买彩票| www.712021.com-盛兴彩票v1手机版| www.71829.com-163彩票客户端| www.119142.com-快三444-| www.553622.com-竞彩半全场高手| www.79868.cc-体彩排列三复式票| www.110747.com-快三杀码定胆| www.51522.cc-天天彩选4几点开奖| www.024438.com-福彩30选5奖金| www.356104.com-体彩大乐透的宣传语| www.472236.com-十亿彩票网-| www.657569.com-大乐透彩之家走势图| www.798668.com-买竞彩怎么算税额| www.ec28.com-百姓彩票是不是骗局| www.83kv.com-苹果手机彩铃怎么换| www.893590.com-河北快三和值推荐号| www.cp8300.com-兰州快三开奖结果| www.mp58.com-彩2神争霸-| www.206548.com-神州彩票app| www.210404.com-中国福彩-| www.298422.com-辽宁有快三么| www.118077.com-体彩大乐透预测杀号| www.500410.com-河内五分彩正规吗| www.074773.com-彩富网报刊大全| 亿万彩票www.630565.com| www.e79.com-特区七星彩头尾论坛| www.639162.com-中彩网福彩3d预测| www.854434.com-酷彩网下载-| www.969203.com-福彩公益金项目调整| www.dy22.cc-亿彩-| www.579383.com-各彩票平台网址大全| www.653504.com-福彩3d福彩-| www.730924.com-麒麟彩票官网| www.799910.com-龙之彩是不是黑平台| www.875167.com-快三稳赚宝典| www.947581.com-我玩彩-| 818合彩www.www.9889hc.com| www.441173.com-彩票店中奖后有奖励| www.087036.com-鸿博彩票靠谱吗| www.h07.top-排三列走势图彩宝网| www.514.club-福彩积分卡网站| www.4322.cn-鑫彩网怎么注册| www.717785.com-彩客网310预测| www.806287.com-59彩票下载-| www.424263.com-如何投诉彩乐瀑| www.1048.org-彩票带回血-| www.16692.cc-168彩栗-| www.004997.com-查一下彩票中奖| www.703258.com-六爻测彩票秘法| www.3189.cm-七星彩一夜谈加急版| www.631285.com-彩票销售平台的优质| www.368728.com-体彩今日开机号码| www.453903.com-号百彩票新版| www.157849.com-好彩牛牛开挂软件| www.207891.com-彩票手机过滤大师| www.205681.com-黑彩平台注册| www.329382.com-312彩票下载| www.434777.com-乾坤彩票-| www.326682.com-火箭彩票平台app| www.661224.com-彩狮-| www.507612.com-福彩开将结果查询| www.095313.com-手机买足彩-| www.293983.com-买体彩大乐透| www.417373.com-彩虹直播-| www.599510.com-彩票怎么才中奖| www.889206.com-最新易彩堂app| www.ms05.com-网上购彩网哪个好| www.41428.com-彩票猜谜语-| www.525068.com-天下彩4949tc| www.616782.com-时时彩账号注册网址| www.637776.com-懂球帝彩票推荐| www.755280.com-中彩网怎么买彩票呢| www.831021.com-快乐双彩开奖玩法| www.787748.com-排三杀号定胆彩经网| www.8371.biz-原版福星七星彩| www.50372.com-彩48下载-| www.5724.biz-开发彩票软件违法吗| www.12242.com-福彩历史中奖查询| www.205563.com-最有实力的私彩平台| www.367884.com-七星彩小说所有番外| www.781626.com-好彩票老品牌| www.327355.com-福彩神牛七乐彩预测| www.688576.com-广东福彩助手| www.837383.com-好聚彩-| www.981604.com-中国体彩有什么报纸| www.la65.com-购彩平台排行榜| www.y23.org-苹果版彩票-| www.874241.com-时时彩源码技术论坛| 杏彩www.00840v.com| www.133684.com-雷诺好彩1预测怎样| www.796216.com-盛世彩票骗了多少人| www.952310.com-福彩网彩票投注平台| www.518522.com-u58发发彩下载| www.858819.com-彩29官方网-| www.023027.com-时时彩刷流水靠谱吗| www.83hf.com-幸运彩怎么看号码| www.73108.com-彩票返奖率怎么算| www.064446.com-私彩平台网址| www.681126.com-六合49彩-| www.773413.com-中国体育彩票小程序| www.845820.com-深圳福彩案-| www.898733.com-福彩快三红黑号| www.962649.com-彩票平台银河| 购彩在线www.66332z.com| www.272288.com-一分彩快三稳赚技巧| www.346358.com-96彩票-| www.13245.com-大发快三能玩吗| www.171616.com-七星彩兑奖表| 500彩票www.3126n.com| www.83qs.com-中金彩app下载| www.34589.com-七彩乐开奖结果| www.026833.com-h辉煌彩票下载| www.092199.com-松原快三走势图| www.162191.com-大运彩票官网| www.375572.com-全民中彩客户端| www.840905.com-儿童彩妆怎么画| E彩堂www.43818f.com| www.247818.com-玩快三犯法会判刑吗| www.9890.org-宏盛彩票平台靠谱么|