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.75ue.com-500彩票安卓版本| www.083047.com-可以反选的彩票工具| www.217286.com-贵州福彩快3下载| www.356846.com-彩票复式怎么看中奖| www.137341.com-六开彩软件下载| www.851390.com-手机上怎么买彩票了| www.997772.cc-乐彩网曲线图| www.410.me-体彩三亿大奖| www.95986.cc-体彩专管员待遇| www.041556.com-多彩贵州集团简介| www.878585.com-下载内蒙福彩大家乐| www.648871.com-天天彩票苹果版下载| www.768216.com-体彩规则说明| www.bt57.com-苏州快三玩法| www.35du.com-特区彩票长条| www.70988.com-腾讯彩票信得过吗| www.536403.com-彩票包括几种类型| www.802888.cc-怎样申请体彩店| www.939615.com-福彩坊官方网站| www.ze0.com-聚福彩快三-| www.0ws.com-福彩奖金计算方法| www.964806.com-体彩杀号定胆| www.zz28.cc-上海有体彩福彩转让| www.199412.com-乐彩太湖字迷网| www.30714.com-玩彩票官网-| www.023014.com-3d彩报大全图片| www.248129.com-快三红号-| www.329269.com-内蒙古福彩开奖结果| www.635583.com-福利彩票税率| www.328610.com-广州吉利快三| www.153712.com-淘彩票快乐3怎么玩| www.os87.com-彩客网app旧版| www.11vb.com-彩票体育彩票| www.c21.tv-小财神彩票推荐号| www.3648.cc-福彩3d牛票票赛票| www.25281.cc-安徽体彩网电话| www.76056.com-彩票纸收费吗| www.680653.com-中国体彩老总| www.791786.com-中国体彩网竞彩| www.883799.com-博友彩江苏快三下载| www.983497.com-绵阳福彩机中心| www.ar34.com-湖北省福彩官网| www.ts35.com-合买彩票是哪个软件| www.95581.com-彩票怎么分-| www.lb8.com-兰州体彩十一选五| www.12999.cc-中国竞彩篮球网官网| www.022578.com-苹果系统重庆时时彩| www.00725.com-乐彩论坛彩票论坛| www.008259.com-礼拜五什么彩票开奖| www.086781.cc-七乐彩的奖金| www.160021.com-广东体彩快中彩玩法| www.197902.com-彩票开奖号码结果| www.328206.com-福彩3d形态论坛| www.498924.com-女孩说玩彩啥意思| www.625736.com-高兴彩票手机| www.703861.com-好彩网站天鸿团队| www.781226.com-彩虹卡通画-| www.98128.cc-福彩上海快3开奖景| www.952601.com-k彩登陆线路测速| www.10050.com-竞彩足球凯利方差| www.65530.com-形容炫彩的词语| www.635470.com-七彩阳光完整版高清| www.783036.com-保定体彩吧-| www.7710.cn-香港地下六仺彩开奖| www.82003.com-能中彩票的命| www.qj00.com-广东好彩一走势图| www.831488.com-已发彩票-| www.920393.com-福利彩5分快3| www.984574.com-易彩网时时彩平台| www.fn48.com-福彩快3官网登录| www.c36.top-快频彩开奖结果| www.65.com-滴滴彩票怎么玩| www.506105.com-澳门顶级博彩| www.578879.com-山东体彩开奖详情| www.067806.com-怎么开黑彩-| www.081339.com-中彩票咒语-| www.698793.com-彩铅上色技巧| www.823812.com-中国彩民更懂彩吧| www.70118.com-专打竞彩受让胜| www.970227.com-盛邦财团彩票| www.cp631.com-彩神vl-| www.198939.com-北京快三彩票怎么玩| www.791842.com-梦想彩票站网址| www.893316.com-内蒙古体育彩票网| www.972784.com-用彩铅画星空的方法| www.dt4.com-王牌彩票骗局| www.840725.com-足彩亚盘分析软件| www.916903.com-竞彩足球360彩票| www.983865.com-808彩彩票网站| www.cv03.com-平台买彩票先赢后输| www.xr88.cc-彩票折叠算损坏吗| www.232975.com-五百万彩票网电脑版| www.13sy.com-七星彩头尾规律软件| www.366666.com-甘肃体彩中心在哪| www.1338.vip-体育彩票开奖结果是| www.764634.com-928彩票官网| www.36675.cc-盛彩彩票平台怎么样| www.vu13.com-惠民彩票是真的吗| www.94682.com-竞彩360足球| www.163411.com-双色球彩民村彩民网| www.737985.com-体彩五d开将结果| www.860434.com-上海快三和值表| GO彩www.can87.com| www.354975.com-买彩票都是什么人| www.7847.biz-快三开奖吉林快三| www.69511.cc-凤凰2彩票-| www.565892.com-足彩稳赚-| www.643626.com-彩票中5块怎么兑奖| www.718340.com-篮球彩票网站| www.784302.com-709彩票网址| www.848518.com-重庆时时彩彩走势图| www.901425.com-最新体彩开奖结果| www.34qz.com-彩界胆王-| www.150223.com-v9彩票官网-| www.230988.com-下载中彩彩票网| www.577748.com-网上玩黑彩犯法吗| www.658035.com-彩神通怎么样下载| www.39116.cc-多彩网彩票网址| www.172982.com-福彩精彩十分走势| www.307761.com-派彩网是谁开的| www.055790.com-cp577彩票平台| www.131327.com-关于彩礼的社会句子| www.449778.com-武汉体彩中心在哪里| www.144088.com-北京时时彩停售时间| www.572101.com-竞彩网首页彩票| www.668005.com-tt彩票真假-| www.772941.com-时时彩趋势k线手机| www.866211.com-明天彩票出什么号码| www.946878.com-频彩是什么-| www.cai7255.com江西快三一定| www.340110.com-在线彩票中奖p图| www.495161.com-街机博彩游戏安卓版| www.569256.com-福彩快三和值走势| www.655151.com-旺角彩皇网址| www.718372.com-彩虹周杰伦mp3| www.11692.cc-福利彩票内部消息| www.74018.com-戳爷彩虹旗-| www.024116.com-磁县彩票中42万| 爱购彩www.23636h.com| www.cy19.com-大发快三大小预测| www.251125.com-中福彩票邀请码| www.351211.com-彩票都有什么用| www.458511.com-体彩竞彩网今日单关| www.568976.com-可以玩彩票的软件| www.659451.com-彩之星是正规的吗| www.751402.com-777彩票网下载| www.835622.com-中彩网站多少| www.915201.com-快捷彩票app下载| www.986213.com-山东群英会百宝彩票| www.007386.com-腾讯彩票安卓版下载| www.928.date-数学彩票计算软件| www.6876.org-港彩开奖结果| www.954614.com-体彩足彩竞猜玩法| www.659324.com-彩票中奖情况| www.814346.cc-体彩排三今天中奖号| www.881845.com-倍投彩票-| www.481.xyz-河北福彩7位数| www.7598.vip-南国七星彩精选论坛| www.36689.com-澳门有什么彩票| www.90556.com-彩票下方二维码| www.074518.com-金彩网下载-| www.751241.com-彩票巴巴v1-| www.802640.com-彩友多官方下载| www.858441.com-中国七乐彩开奖信息|