基于jQuery實現微信開放平臺注冊表單特效



41 163 55



特效描述:基于jQuery實現 微信開放平臺 注冊表單,基于jQuery實現微信開放平臺注冊表單特效

代碼結構

1. 引入CSS

<link rel="stylesheet" href="css/base.css" />
<link rel="stylesheet" href="css/layout.css"/>

2. 引入JS

<script src="js/jquery.min.js"></script>

3. HTML代碼

	<div id="wrapper">
		<header id="header">
			<div id="loginBar">
				<div class="w960 tr">
					<a href="#">登錄</a> <span class="sp">|</span> <a href="#">注冊</a>
				</div>
			</div>
			<div id="headBox">
				<div class="w960 oh">
					<a href="#" class="fl mt10"><img src="images/logo.png" alt="logo" /></a>
					<nav id="navs" class="fr">
						<a href="#">首頁</a>
						<a href="#">資源中心</a>
						<a class="active" href="#">管理中心</a>
					</nav>
				</div>
			</div>
		</header><!-- // header end -->
		<div class="container w960 mt20">
			<div id="processor" >
				<ol class="processorBox oh">
					<li class="current">
						<div class="step_inner fl">
							<span class="icon_step">1</span>
							<h4>填寫基本信息</h4>
						</div>
					</li>
					<li>
						<div class="step_inner">
							<span class="icon_step">2</span>
							<h4>郵箱激活</h4>
						</div>
					</li>
					<li>
						<div class="step_inner fr">
							<span class="icon_step">3</span>
							<h4>完善開發者資料</h4>
						</div>
					</li>
				</ol>
				<div class="step_line"></div>
			</div>
			<div class="content">
				<div id="step1" class="step hide">
					<form action="" method="post" id="step1_frm">
						<div class="frm_control_group">
							<label class="frm_label">郵箱</label>
							<div class="frm_controls">
								<input type="text" name="" class="frm_input email" maxlength="32"/>
								<p class="frm_tips">作為登錄帳號,請填寫未被微信開放平臺注冊、未被微信公眾平臺注冊、未被微信私人帳號綁定的郵箱</p>
							</div>
						</div>
						<div class="frm_control_group">
							<label class="frm_label">密碼</label>
							<div class="frm_controls">
								<input type="password" name="" class="frm_input passwd"/>
								<p class="frm_tips">字母、數字或者英文符號,最短6位,區分大小寫</p>
							</div>
						</div>
						<div class="frm_control_group">
							<label class="frm_label">再次輸入密碼</label>
							<div class="frm_controls">
								<input type="password" name="" class="frm_input passwd2"/>
							</div>
						</div>
						<div class="frm_control_group">
							<label class="frm_label">驗證碼</label>
							<div class="frm_controls verifycode">
								<input type="text" name="" class="frm_input verifyCode" maxlength="4"/>
								<img src="images/verifycode.jpeg" alt="" />
								<a class="changeVerifyCode" href="javascript:;">換一張</a>
							</div>
						</div>
						<div class="toolBar">
							<a id="nextBtn" class="btn btn_primary" href="javascript:;">下一步</a>
						</div>
					</form>
				</div><!-- // step1 end -->
				<div id="step2" class="step hide">
					<div class="w330">
						<strong class="f16">感謝注冊,確認郵件已發送至你的注冊郵箱 : <br />[email protected]</strong>
						<p class="c7b">請進入郵箱查看郵件,并激活微信開放平臺帳號。</p>
						<p><a class="btn btn_primary mt20" href="javascript:;">登錄郵箱</a></p>
						<p class="c7b mt20">沒有收到郵件?</p>
						<p>1. 請檢查郵箱地址是否正確,你可以返回 <a href="#" class="c46">重新填寫</a></p>
						<p>2. 檢查你的郵件垃圾箱</p>
						<p>3. 若仍未收到確認,請嘗試 <a href="#" class="c46">重新發送</a></p>
					</div>
				</div><!-- // step2 end -->
				<div id="step3" class="step hide">
					<form action="" method="post" id="step3_frm">
						<div class="frm_control_group">
							<label class="frm_label">真實姓名</label>
							<div class="frm_controls">
								<input type="text" name="" class="frm_input name" maxlength="32"/>
								<p class="frm_tips">請填寫真實姓名</p>
							</div>
						</div>
						<div class="frm_control_group">
							<label class="frm_label">手機號</label>
							<div class="frm_controls">
								<input type="text" name="" class="frm_input phone"/>
								<p class="frm_tips">請填寫常用手機號</p>
							</div>
						</div>
						<div class="frm_control_group">
							<label class="frm_label">手機驗證碼</label>
							<div class="frm_controls">
								<input type="text" name="" class="frm_input phoneYzm"/>
								<input type="button" value="獲取驗證碼" class="btn btn_default" />
							</div>
						</div>
						<div class="toolBar">
							<a id="finishedBtn" class="btn btn_primary" href="javascript:;">完成</a>
						</div>
					</form>
				</div><!-- // step3 end -->
			</div>
		</div><!-- // container end -->
		<footer id="footer" class="w960 oh">
			<nav class="footNavs tr fr">
			</nav>
		</footer><!-- // footer end -->
	</div><!-- // wrapper end -->
	<script> 
		//顯示提示框,目前三個參數(txt:要顯示的文本;time:自動關閉的時間(不設置的話默認1500毫秒);status:默認0為錯誤提示,1為正確提示;)
		function showTips(txt,time,status)
		{
			var htmlCon = '';
			if(txt != ''){
				if(status != 0 && status != undefined){
					htmlCon = '<div class="tipsBox" style="width:220px;padding:10px;background-color:#4AAF33;border-radius:4px;-webkit-border-radius: 4px;-moz-border-radius: 4px;color:#fff;box-shadow:0 0 3px #ddd inset;-webkit-box-shadow: 0 0 3px #ddd inset;text-align:center;position:fixed;top:25%;left:50%;z-index:999999;margin-left:-120px;"><img src="images/ok.png" style="vertical-align: middle;margin-right:5px;" alt="OK,"/>'+txt+'</div>';
				}else{
					htmlCon = '<div class="tipsBox" style="width:220px;padding:10px;background-color:#D84C31;border-radius:4px;-webkit-border-radius: 4px;-moz-border-radius: 4px;color:#fff;box-shadow:0 0 3px #ddd inset;-webkit-box-shadow: 0 0 3px #ddd inset;text-align:center;position:fixed;top:25%;left:50%;z-index:999999;margin-left:-120px;"><img src="images/err.png" style="vertical-align: middle;margin-right:5px;" alt="Error,"/>'+txt+'</div>';
				}
				$('body').prepend(htmlCon);
				if(time == '' || time == undefined){
					time = 1500; 
				}
				setTimeout(function(){ $('.tipsBox').remove(); },time);
			}
		}
		$(function(){
			//AJAX提交以及驗證表單
			$('#nextBtn').click(function(){
				var email = $('.email').val();
				var passwd = $('.passwd').val();
				var passwd2 = $('.passwd2').val();
				var verifyCode = $('.verifyCode').val();
				var EmailReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; //郵件正則
				if(email == ''){
					showTips('請填寫您的郵箱~');
				}else if(!EmailReg.test(email)){
					showTips('您的郵箱格式錯咯~');
				}else if(passwd == ''){
					showTips('請填寫您的密碼~');
				}else if(passwd2 == ''){
					showTips('請再次輸入您的密碼~');
				}else if(passwd != passwd2 || passwd2 != passwd){
					showTips('兩次密碼輸入不一致呢~');
				}else if(verifyCode == ''){
					showTips('請輸入驗證碼~');
				}else{
					showTips('提交成功~ 即將進入下一步',2500,1);
					//此處省略 ajax 提交表單 代碼...
				}
			});
			//切換步驟(目前只用來演示)
			$('.processorBox li').click(function(){
				var i = $(this).index();
				$('.processorBox li').removeClass('current').eq(i).addClass('current');
				$('.step').fadeOut(300).eq(i).fadeIn(500);
			});
		});
	</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 彈出層拖動 窗口 彈出 彈窗 彈出層 提示框 對話框 遮罩 遮罩層 彈窗插件 切換按鈕 表單 表單美化 表單插件 表單美化插件 文字提示框 提示文字 注冊框 驗證碼 表單提交
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表