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天

知道了
彩01彩票 www.073958.com-335彩票靠谱吗| www.272331.com-快三外挂演示| www.316544.com-福彩正方形标志图片| www.019132.com-牛蛙彩资料大全| www.123777.cc-福利彩票8000万| www.221039.com-彩神3-| www.345787.com-今晚体彩中奖号码| www.530896.com-天天彩玩法介绍| www.631576.com-七彩视界会员靠谱么| www.790010.com-彩票ac值计算器| www.8310.net-江西彩票品种| www.74268.com-七乐彩3等奖多钱| www.131376.com-旧够力七星彩奖表| www.246866.com-今日袁老师看彩| www.350420.com-福彩门户d39us| www.450122.com-博亚彩票注册码| www.563865.com-体彩23期寻马图| www.705775.com-发送信息送彩金| www.851361.com-时时彩后二公式打法| www.997647.com-好运彩手机版下载| www.rh03.com-甘肃11选5爱彩乐| www.4fy.com-天天中彩票人工客服| www.87795.cc-时时彩彩票宣判| www.087015.com-乐福购彩大厅| www.188742.com-快三中两个号多少钱| www.291961.com-北京基诺彩-| www.379053.com-秦皇岛福彩快三| www.502274.com-2019白菜网彩金| www.586506.com-彩金app下载| www.670232.com-凤彩网福彩3d独胆| www.758063.com-中彩网开奖视频| www.840403.com-竞彩足球平均优化| www.918484.com-2345彩票网址| www.997476.com-丰盈彩票app下载| www.ba69.com-快三安徽-| www.802231.com-彩票站低价出兑| www.188678.com-快三屠龙规律技巧| www.32ej.com-彩票今天开什么哪类| www.091321.com-易盈彩票官方下载| www.465178.com-各类彩票的玩法| www.539096.com-时时彩杂六半顺玩法| www.602966.com-彩虹六号解禁| www.959583.com-五福彩票是真是假| www.al08.com-高手七星彩口诀| www.34oj.com-七星彩结果直播现场| www.664.org-天津时时彩计划个位| www.8015.cm-彩虹伞的玩法视频| 网易彩票www.506792.com| www.754519.com-中彩网双色球擂台会| www.501813.com-易记彩票可靠吗| www.692390.com-代理平台彩票| www.844872.com-陕西体彩排三| www.933596.com-福利彩票下期预测| www.999060.com-彩乐汇网址-| www.er26.com-中彩app可以买吗| www.117587.com-360竞彩混合| www.327557.com-体彩排列五历史号码| www.505734.com-国丰彩票能赚钱吗| www.588382.com-体彩第19024期| www.703288.com-彩票解码软件下载| www.788844.com-中彩网一官网| www.871736.com-福彩青蛙过河| 918彩票网www.918io.com| www.150125.com-广东体彩官网| www.497031.com-福彩3d校长预测图| www.14371.com-中国电脑体育彩票| www.03842.cc-彩票还是别守号了| www.006868.cc-体彩任选3规则| www.553355.com-代理cc网投彩票| www.660348.com-快彩计划网页| www.891675.com-兴盛彩票app下载| www.b99.cc-网投时时彩骗局揭秘| www.012129.com-v8彩票5048-| www.155531.com-双色球彩票怎么玩的| www.273211.com-福彩文化理念| www.4729.vip-彩票中心工作的人| www.73854.com-买体彩排列五的技巧| www.032325.com-怎么查询彩票真假| www.9590.vip-七星彩今期预测| www.1358.cn-彩运来官网登入| www.558122.com-今晚地下六仺彩开奖| www.250735.com-手机版分分彩票| www.424284.com-星彩无惨是什么| www.793138.com-玩彩票被骗怎么办| www.511211.com-音乐彩虹周杰伦| www.598609.com-福利彩票3d号码| www.686916.com-中彩那天词语| www.783108.com-新星彩网址手机版| www.915395.com-淘宝彩票官方网站| www.980967.com-彩针糖挤出机| www.ld3.com-e球彩奖金参照表| www.su17.cc-时时彩五星大底规律| www.42lx.com-澳门香港竞彩| www.528.cn-合肥彩票站转让信息| www.4108.org-彩虹七号普通多少钱| www.322882.com-北京快三个位走势图| www.441839.com-19日竞彩赔率解读| www.7838.com-足彩可以当职业吗| www.865330.com-福彩最大遗漏| www.963514.com-菏泽单县彩礼顺口溜| www.la6.cc-快快三走势-| www.93595.com-75彩app-| www.677596.com-体彩排列三组选走势| www.iw.com-彩票是赌博-| www.20pn.com-体彩有几等奖| www.5373.biz-樱桃彩铅画教程图解| www.518548.com-彩票号码dna软件| www.369771.com-彩之云客服-| www.131497.com-河南彩票报纸| www.692519.com-6678彩票平台下| www.823482.com-彩涂铝卷多少钱一吨| www.900291.com-500万彩票比分直| www.965162.com-近期彩票中奖的彩民| 手机购彩www.529799.com| www.ky02.com-百盈快三预测| www.673665.com-古建筑彩绘颜料配料| www.10779.com-如何看福利彩票| www.311273.com-乐盈时时彩-| www.378191.com-体彩福彩今天出将号| www.470165.com-173彩票下载安装| www.968074.com-最新彩票微信群| www.731464.com-易彩堂怎么稳赚| www.883421.com-彩票票-| 中彩网www.71233z.com| www.265791.com-福彩代理-| www.324987.com-f彩网打单骗局| www.384583.com-澳彩票平台下载| www.499839.com-新加坡快彩-| www.562812.com-34期福彩-| www.610676.com-湖北有精彩十分| www.666306.com-福利彩票app大全| www.n37.net-中奖彩民故事| www.7622.top-爱投网和口袋彩店| www.7065.vip-幸运彩高手-| www.21699.com-互娱彩票-| www.72575.cc-c彩票-| www.670906.com-竞彩哪家卖得好| www.766364.com-重庆时时彩无法提现| www.843629.com-福彩考试知识题库| www.900500.cc-福彩61生肖中奖表| www.958572.com-福彩3d中奖故事| 彩世界www.33csj.com| www.206782.com-教人买彩票骗局甜头| www.030129.com-合买彩票月赚上万| www.7839.biz-职业玩彩票-| www.359706.com-附近中国体彩| www.429520.com-江苏快三福利彩| www.513010.com-化彩社区交流大厅| www.569719.com-我要下载七彩捞腌菜| www.627703.com-极速快三技巧平台| www.095909.com-台湾彩票开奖结果| www.175977.com-鸿运快三是骗人的吗| www.611855.com-真实的彩票程序| www.681276.com-三b天天中彩吧| www.761154.com-体彩销售提成多少| www.828892.com-九彩彩票官网首页| www.902386.com-买3d黑彩5码| www.969391.com-彩虹计划-| 13e彩票www.203035.com| www.425758.com-体彩兑奖扫描二维码| www.624422.com-彩票33安卓| 大玩家彩票www.84499p.com| www.630619.com-舟山体彩飞鱼走势图| www.235136.com-九龙坡区彩票|