jQuery带验证的分步式注册表单

页面的head部分，仅需引入两个CSS样式文件，代码如下：

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

页面的body部分，主要是3个步骤放置在不同的容器里，内容挺多的，部分代码如下：

<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>

页面的底部主要是一些验证的规则等，部分代码如下：

$(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);
	});
});