jQuery微信开放平台注册表单js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery微信开放平台注册表单js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>jQuery微信开放平台注册表单</title>
	<link rel="stylesheet" href="css/base.css" />
	<link rel="stylesheet" href="css/layout.css"/>
</head>
<body>
	<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 />haibao1024@gmail.com</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 -->
	</div><!-- // wrapper end -->
	
	<script src="js/jquery.min.js"></script>
	<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>
</body>
</html>

CSS代码(base.css):

@charset "utf-8";/*! * @鍚嶇О锛歜ase.css * @鍔熻兘锛?銆侀噸璁炬祻瑙堝櫒榛樿鏍峰紡 * 2銆佽缃€氱敤鍘熷瓙绫? */
/* 闃叉鐢ㄦ埛鑷畾涔夎儗鏅鑹插缃戦〉鐨勫奖鍝嶏紝娣诲姞璁╃敤鎴峰彲浠ヨ嚜瀹氫箟瀛椾綋 */
html{background:#ffffff;color:#666;}
body{font:14px/24px "Microsoft YaHei","Arial",sans-serif;background:#E9EAEB;color:#222222;}
/* 鍐呭杈硅窛閫氬父璁╁悇涓祻瑙堝櫒鏍峰紡鐨勮〃鐜颁綅缃笉鍚?*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0;}
li{list-style:none;}
/* 瑕佹敞鎰忚〃鍗曞厓绱犲苟涓嶇户鎵跨埗绾?font 鐨勯棶棰?*/
button,input,select,textarea{font:12px \5b8b\4f53,arial,sans-serif;}
input,select,textarea{font-size:100%;}
/* 鍘绘帀 table cell 鐨勮竟璺濆苟璁╁叾杈归噸鍚?*/
table{border-collapse:collapse;border-spacing:0;}
/* ie bug锛歵h 涓嶇户鎵?text-align */
th{text-align:inherit;}
/* 鍘婚櫎榛樿杈规 */
fieldset,img{border:none;}
/* ie6 7 8(q) bug 鏄剧ず涓鸿鍐呰〃鐜?*/
iframe{display:block;}
/* 鍘绘帀 firefox 涓嬫鍏冪礌鐨勮竟妗?*/
abbr,acronym{border:none;font-variant:normal;}
/* 涓€鑷寸殑 del 鏍峰紡 */
del{text-decoration:line-through;}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500;}
/* 鍘绘帀鍒楄〃鍓嶇殑鏍囪瘑锛宭i 浼氱户鎵?*/
ol,ul{list-style:none;}
/* 瀵归綈鏄帓鐗堟渶閲嶈鐨勫洜绱狅紝鍒浠€涔堥兘灞呬腑 */
caption,th{text-align:left;}
/* 鏉ヨ嚜yahoo锛岃鏍囬閮借嚜瀹氫箟锛岄€傚簲澶氫釜绯荤粺搴旂敤 */
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500;}
q:before,q:after{content:'';}
/* 缁熶竴涓婃爣鍜屼笅鏍?*/
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sup{top:-0.5em;}
sub{bottom:-0.25em;}
/* 璁╅摼鎺ュ湪 hover 鐘舵€佷笅鏄剧ず涓嬪垝绾?*/
a:hover{text-decoration:underline;}
/* 榛樿涓嶆樉绀轰笅鍒掔嚎锛屼繚鎸侀〉闈㈢畝娲?*/
ins,a{text-decoration:none;}
a{color:#666;}
/* 鍘婚櫎 ie6 & ie7 鐒︾偣鐐圭姸绾?*/
a:focus,*:focus{outline:none;}
/* 娓呴櫎娴姩 */
.clearfix:before,.clearfix:after{content:"";display:table;}
.clearfix:after{clear:both;overflow:hidden;}
.clearfix{zoom:1;/* for ie6 & ie7 */
}
.clear{clear:both;display:block;font-size:0;height:0;line-height:0;overflow:hidden;}
/* 璁剧疆鏄剧ず鍜岄殣钘忥紝閫氬父鐢ㄦ潵涓?js 閰嶅悎 */
.hide{display:none;}
.block{display:block;}
/* 璁剧疆娴姩锛屽噺灏戞诞鍔ㄥ甫鏉ョ殑 bug */
.fl,.fr{display:inline;}
.fl{float:left;}
.fr{float:right;}
.oh{overflow:hidden;}
/* 璁剧疆瀵归綈 */
.tc{text-align:center;}
.tr{text-align:right;}
.tl{text-align:left;}

CSS代码(layout.css):

@charset "utf-8";/*! * @鍚嶇О锛歭ayout.css * @鍔熻兘锛氳嚜瀹氫箟鏍峰紡 * @浣滆€咃細haibao * @鏃ユ湡锛?014-05-22 */
.w960{width:960px;margin:0 auto;}
.w330{width:330px;margin:0 auto;}
.mt10{margin-top:10px;}
.mt20{margin-top:20px;}
.c7b{color:#7B7B7B;}
.c46{color:#4677BD;}
.f16{font-size:16px;}
/* header */
#loginBar{background-color:#2B2B2B;line-height:36px;}
#loginBar a{color:#707070;}
.sp{color:#707070;margin:0 2px;}
#headBox{background-color:#525255;}
#navs a{color:#EBEBEB;font-size:18px;line-height:60px;display:inline-block;margin-left:2em;}
#navs a.active,#navs a:hover{text-decoration:none;color:#96E443;}
/* container */
.container{border:1px solid #C5C5C5;border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;box-shadow:0 0 3px #ccc;-webkit-box-shadow:0 0 3px #ccc;}
#processor{background-color:#565656;padding:15px 70px;position:relative;}
#step1{display:block;}
.processorBox li{float:left;width:33.333%;}
.step_inner{color:#FFFFFF;text-align:center;width:100px;margin:0 auto;}
.step_line{width:720px;background-color:#9E9F9F;height:6px;position:absolute;top:50%;left:50%;margin:-18px auto auto -360px;z-index:1;}
.processorBox li .icon_step{width:36px;height:36px;line-height:36px;display:inline-block;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;color:#fff;font-size:18px;text-align:center;background-color:#A4A4A4;position:relative;z-index:2;}
.processorBox li.current .icon_step{background-color:#64BD2E;}
.processorBox h4{color:#fff;margin-top:5px;}
.processorBox li.current h4{color:#64BD2E;}
.content{background-color:#ffffff;padding:45px 50px;}
.frm_control_group{padding-bottom:25px;}
.frm_label{width:6em;float:left;margin-right:1em;line-height:35px;}
.frm_controls{display:table-cell;float:none;vertical-align:top;width:auto;}
.frm_input,.frm_textarea{width:300px;outline:0 none;border:1px solid #C5C5C5;height:35px;line-height:35px;vertical-align:middle;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;box-shadow:0 1px 1px rgba(0,0,0,0.06) inset;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.06) inset;padding:0 10px;}
.frm_input:focus,.frm_textarea:focus{border:1px solid #4677BD;box-shadow:0 0 2px #ddd;-webkit-box-shadow:0 0 3px #ddd;}
.frm_tips{color:#C1C2C3;padding-top:4px;width:320px;}
.verifycode .frm_input{width:98px;}
.verifycode img{height:37px;vertical-align:middle;}
.changeVerifyCode{color:#4677BD;margin-left:3px;}
.toolBar{margin-top:15px;padding:25px 0 0 98px;border-top:1px solid #D2D2D2;box-shadow:0 1px 0 #FBFBFB inset;-webkit-box-shadow:0 1px 0 #FBFBFB inset;}
.btn{border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;cursor:pointer;display:inline-block;font-size:14px;height:35px;line-height:35px;overflow:visible;padding:0 36px;text-align:center;text-decoration:none;vertical-align:middle;}
.btn_primary{background-color:#4AAF33;color:#FFFFFF;border:1px solid #3EAC27;}
.btn_default{background-color:#F1F1F1;color:#000000;border:1px solid #D1D1D1;}
.btn:hover{text-decoration:none;}
.phoneYzm{width:145px;}
/* footer */
#footer{padding:12px 0 30px 0;color:#9E9F9F;}
.footNavs{color:#9E9F9F;}

附件:下载该文件资源,减少时间成本(增值服务)