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.375708.com-乐彩彩票苹果下载| www.502730.com-拉个快彩赚多少钱| www.618798.com-彩票机怎么兑奖| www.70xk.com-彩易达招聘信息| www.38oo.com-素描彩铅画小白兔| www.772.la-幼儿彩色画-| www.wa24.com-七星彩今晚开奖查询| www.cb77.com-彩51彩票下载| www.79lb.com-图谜汇总3d牛彩网| www.2999.date-牛彩网开奖结果| www.002422.com-苏州开彩票店申请| www.078937.com-牛彩彩票-| www.318917.com-体彩福彩图标下载| www.4689.com-时时彩贴吧-| www.67837.cc-怎样黑网站赌博彩票| www.071212.com-彩28下载-| www.967489.com-福利彩票一定牛快三| www.p33.me-体育彩票怎样玩| www.2470.xyz-天地彩app-| www.37371.com-天天中彩网骗人吗| www.673334.com-广东三快三是私人彩| www.072160.com-包头开彩票站多少钱| www.278889.com-红牛彩票下载安装| www.38351.cc-酷彩吧能买彩票吗| www.916412.com-乐迎彩票王下载| www.mq9.com-安徽快三是真的吗| www.210458.com-吉林快三害人| www.667344.com-分分彩技巧投注方法| www.964300.com-绵阳体彩中心在哪| www.46ma.com-怎么申请开体彩店| www.737067.com-诚信快捷彩票app| www.871742.com-福彩刮刮乐自助兑奖| www.an59.com-3分快三全天计划| www.6wl.cc-过年为职工发彩票| www.345780.com-彩票大数据概率| www.1915.org-雷州七星彩梦册网| www.73920.com-500彩票股票代码| www.951234.com-京彩挂机绑定平台| www.685819.com-工商银行银彩通| www.523295.com-柬埔寨时时彩| www.cp807.com-网上玩快三违法么| www.442228.com-app福利彩票| www.300631.com-网银彩票-| www.380844.com-付费彩票计划软件| www.503239.com-鸿彩是真的假的| www.589037.com-福彩专家预测胆码| www.672137.com-彩票中奖秘籍| www.805312.com-山东彩色母粒厂| www.895488.com-网投彩票真正提现| www.4pl.com-怎样买才中彩票| www.8898.me-竞彩中奖最高图片| 爱彩乐www.762918.com| www.9ke.cc-七星彩开奖直播网址| www.240123.com-彩神vl是真的么| www.432155.com-彩票行家网站| www.611855.com-真实的彩票程序| www.680613.com-彩网彩吧-| www.360100.com-足球彩票销量排行榜| www.524789.com-彩票网易开奖查询| www.600089.cc-一元充值彩票| www.753084.com-彩票害人图片| www.871762.com-福彩刮刮乐中奖图片| www.941100.com-大发快三怎么当代理| 500万彩票www.01500w.com| www.115.in-体彩多久后不能兑奖| www.14210.com-今日竞彩足球比赛| www.4552.xyz-关于彩票中奖的小说| www.9240.com-彩票培训师严玉进| www.375282.com-ttcp彩票官网| www.535948.com-彩票最大号码是多少| www.55ag.com-贵州体彩范劲松| www.131670.cc-河南福利彩票官网站| www.935687.com-福彩3d交流-| www.c70.com-彩站专用电视走势图| www.82bx.com-大发购彩-| www.3735.biz-好彩团队靠谱吗| www.63pn.com-彩票平台怎么搭建| www.3976.cn-体彩316前后关系| www.11277.com-烟台市福利彩票| www.716.website非法卖彩票定罪标准| www.330110.com-牛材网首页彩吧| www.994599.com-什么是彩票注数| www.pw66.com-三分彩玩法-| www.54hb.com-六开彩开奖助手| www.5285.cc-天吉彩票论谈| www.432410.com-发很多钱买彩票| www.093100.com-上海彩钢板生产厂家| www.667754.com-福利彩票公平吗| www.85881.com-3d牛彩推荐号| www.054242.com-yy彩票注册链接| www.222767.com-福彩app下载| www.546366.com-彩票站退机申请书| www.616163.com-609彩票下截| www.02vx.com-全球彩票开奖网| www.028807.com-cp彩票安卓版官网| www.037769.com-乐彩网一分快3真假| www.785254.com-快三福利彩票| www.876088.com-新2彩-| www.965221.com-福彩藏机图新彩吧| 凤凰彩票www.77803g.com| www.046485.com-甘肃快三遗漏数据表| www.fg41.com-极速快三人工计划| www.8483.org-易彩5115-| www.806678.com-腾讯分分彩玩法介绍| www.932244.com-恒博彩票是真的吗| www.cai24.cc-江苏快三骗局| www.416444.com-福利彩票快三魔图| www.lj17.com-手机版分分彩票| www.603211.com-下载彩票彩宝| www.685881.com-免费下载体育彩票| www.783896.com-505彩票群-| www.2035.pro-好彩堂全年资料大全| www.71hb.com-vr金星彩票-| www.318160.com-官方时时彩有哪些| www.51508.com-上海天天彩选四奖号| www.0007.cc-福利彩票的数学期望| www.53705.cc-盈盛国际时时彩| www.021425.com-恒博彩票下载安装| www.381190.com-今日七乐彩开奖直播| www.654485.com-福彩全国排名| www.114332.com-福利彩票怎么随机买| www.5080.vip-能用手机买福彩吗| www.16985.cc-网上彩票如何兑奖| www.65543.com-福彩三d论坛静态版| www.kr05.com-新快三单机游手机版| www.331195.com-彩神网兼职靠谱吗| www.954511.com-牛蛙彩票app| www.47wk.com-彩票360网购大厅| www.3181.wang-星彩网3d开机号| www.5060.cm-q彩网怎么作弊| www.026373.com-赢家彩票首页| www.du84.com-金利快三-| www.940551.com-金福彩票app下载| www.989770.com-彩民乐阳光探吗图| www.bi38.com-乐点大发彩票| www.sz25.com-国彩有哪些-| www.879600.com-人人赢彩票-| www.192715.com-彩票app都停售了| www.t21.pw-郑州代理彩票站| JJ彩票www.45258.cc| www.159961.com-彩票com-| www.265323.com-中国福彩开奖规则| www.576827.com-西安体彩店转让信息| www.637529.com-体彩六加一中奖规则| www.987275.com-体彩购彩客户端| www.cp7966.com-福彩网快三下载| www.503357.com-世彩堂彩票官网| www.564258.com-程阳3188彩票| www.621159.com-聚福彩票成立时间| www.964030.com-描写雨后彩虹的句子| www.35rh.com-体彩官网哪里买好点| www.084.win-哪个彩票销售额大| www.089337.com-台北快三全天计划| www.2141.cn-23彩票开奖直播| www.66js.com-七星彩直码定位| www.2641.vip-体彩一周开几次奖| www.678249.com-高频彩开奖软件| www.19vh.com-分分彩挂机投注软件| www.26196.cc-彩虹周杰伦原唱| www.818745.com-快三对子有多少个| www.086898.com-神彩福牛彩票下载| www.068995.com-快三模拟摇奖| www.68534.com-www.梦想彩票| www.029751.com-体育彩票专业版官网|