jquery仿微信开放平台选项卡带步骤的注册表单验证代码



127 507 170



特效描述:选项卡带步骤 注册表单验证,虽说是仿微信开放平台注册页,但是并不完全一样。表单带验证(推荐使用AJAX),tab切换步骤(做演示用)

代码结构

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 />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 -->
		<footer id="footer" class="w960 oh">
			<span class="fl">© 1998 - 2014 Tencent All Right Reserved.</span>
			<nav class="footNavs tr fr">
				<a href="#">联系腾讯</a>
				<span class="sp">|</span>
				<a href="#">投诉建议</a>
			</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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 切换按钮 表单 表单美化 表单插件 表单美化插件 导航切换 菜单切换 文本框 text文本框 表单验证 表单验证插件

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到