<!DOCTYPE html>
<html lang=zh-cn> 
<head>
	<meta charset=utf-8> 
	<title>注册纵横通行帐号</title> 
	<meta name=description content=一个帐号通用纵横旗下所有网络产品。> 
	<meta name=copyright content=smartcost.com.cn> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<link rel=stylesheet href=<?php echo $data['rootUrl_CSS']; ?>global.css>
	<script src=<?php echo $data['rootUrl_JS']; ?>jquery-1.7.1.min.js></script>
	<script src=<?php echo $data['rootUrl_JS']; ?>global.js></script>
	<script src=<?php echo $data['rootUrl_JS']; ?>jquery.validate.min.js></script>
	<script type="text/javascript">
		$(function(){
			jQuery.validator.addMethod("isMobile", function(value, element) {
				var length = value.length;
				var mobile = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1})|(14[0-9]{1}))+\d{8})$/;
				return this.optional(element) || (length == 11 && mobile.test(value));
			}, "请正确填写您的手机号码");
			jQuery.validator.addMethod("isCode", function(value, element) {
				var length = value.length;
				var mobile = /^(\d{6})$/;
				return this.optional(element) || (length == 6 && mobile.test(value));
			}, "请正确填写验证码");

			$('#regmobileform').validate({
				rules: {
					zhmobile:{
						required: true,
						isMobile: true,
						remote: {
							url: '<?php echo $data['rootUrl']; ?>check',
							type: 'POST',
							dateType: 'json',
							data: {
								zhmobile: function () {
									return $('#zhmobile').val();
								}
							}
						}
					},
					zhmpasswd: {
						required: true,
						minlength: 6,
						maxlength: 16
					},
					zhsmscode: {
						required: true,
						isCode: true,
						remote: {
							url: '<?php echo $data['rootUrl']; ?>check',
							type: 'POST',
							dateType: 'json',
							data: {
								zhsmscode: function () {
									return $('#zhsmscode').val();
								},
								zhmobile: function () {
									return $('#zhmobile').val();
								}
							}
						}
					},
					zhmuser: {
						required: true,
						minlength: 3,
						maxlength: 18,
						remote: {
							url: '<?php echo $data['rootUrl']; ?>check',
							type: 'POST',
							dateType: 'json',
							data: {
								zhmuser: function () {
									return $('#zhmuser').val();
								}
							}
						}
					}
				},
				messages: {
					zhmobile:{
						required: "请输入手机号",
						remote: "该手机号码已被注册！"
					},
					zhmpasswd:{
						required:"请输入密码",
						minlength: "密码长度不能小于6",
						maxlength: "密码长度不能大于16"
					},
					zhsmscode: {
						required: "请输入验证码",
						remote: "验证码过期或不一致，请重新获取"
					},
					zhmuser:{
						required:"请输入您的注册账户",
						minlength:"长度不能低于3个字符",
						maxlength:"长度不能超过18个字符",
						remote: "账户已被注册！"
					}
				},
				errorElement: "span",// 错误信息容器标签
				errorClass: "textError",
				validClass: "inputSus",
				onkeyup: false
			});
		});
	</script>
</head>
<body>
<!--<h2 class="mobileTop">注册通行帐号</h2>-->
<div class="mobileRe">
	<!-- <h3 class="mobileTopImg"><img src="images/mainlogo.png"></h3> -->
	<div class="trainFormItem">
		<div class="formEntry">
			<form id="regmobileform" name="mobileform" method="post" action="<?php echo $data['rootUrl']; ?>smsreg">
			<dl class="regForm">
				<dt>手机号</dt>
				<dd>
					<input type="tel" id="zhmobile" name="zhmobile" class="inputText" placeholder="请输入你的手机号码">
				</dd>
				<dt>密码</dt>
					<dd>
						<input type="password" name="zhmpasswd" id="zhmpasswd" class="inputText" placeholder="密码长度为6～16位，建议使用数字与英文混合">
					</dd>
				<dt>短信校验码</dt>
				<dd>
					<input type="tel" name="zhsmscode" id="zhsmscode" class="inputText" style="width:45%;" placeholder="校验码是6位数字">
					<!--<button class="btnTextMod btnTextOne" id="codebtn" onclick="checkAndSend(this)">获取验证码</button>-->
					<input type="button" class="btnTextMod btnTextOne" id="codebtn" value="获取验证码" onclick="checkAndSend(this)" >
				</dd>
				<dt>怎么称呼您</dt>
				<dd>
					<input type="text" id="zhmuser" name="zhmuser" class="inputText" placeholder="3-18位，可以由中英文、数字和标点符号等组合">
				</dd>
				<input type="hidden" name="mobilereg" value="">
			</dl>
			<dl class="regForm" style="">
				<dd class="clearfix"><br><br><input class="button btn-green btnMobile" type="submit" id="regmsubmit" name="regmsubmit" value="同意以下协议并注册"/></dd>
				<dd><br><a href="#" style="color:#999">《通行帐号注册协议》</a></dd>
			</dl>
			</form>
		</div>
	</div>
</div>
<script type="text/javascript">
	var clock = '';
	var nums = 60;
	var btn;
	function checkAndSend(thisbtn){
		$('#zhmobile').removeClass('textError');
		if($('#zhmobile').siblings().hasClass('textError')){
			$('#zhmobile').siblings('.textError').remove();
		}
		var mobile = $('#zhmobile').val();
		if(mobile == ''){
			$('#zhmobile').addClass('textError');
			var span = '<span class="textError">请输入手机号</span>';
			$('#zhmobile').parent().append(span);
			return false;
		}else if(!mobile.match(/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1})|(14[0-9]{1}))+\d{8})$/)){
			$('#zhmobile').addClass('textError');
			var span = '<span class="textError">请正确填写您的手机号码</span>';
			$('#zhmobile').parent().append(span);
			return false;
		}
		var flag = true;
		$.ajax({
			url: '<?php echo $data['rootUrl']; ?>checksms',
			type: 'POST',
			dateType: 'json',
			async: false,
			data: {zhmobile:mobile},
			success: function (result) {
				var data = eval('('+result+')');
				if(data.code == -1){
					$('#zhmobile').addClass('textError');
					var span = '<span class="textError">'+data.msg+'</span>';
					$('#zhmobile').parent().append(span);
					flag = false;
				}else if(data.code == 1){
					flag = true;
				}
			}
		});
		if(!flag){
			return false;
		}
		$('#zhmobile').addClass('inputSus');
		sendCode(thisbtn);
	}

	function sendCode(thisBtn)
	{
		btn = thisBtn;
		btn.disabled = true; //将按钮置为不可点击
		btn.value = nums+'秒后可重新获取';
		$('#codebtn').removeClass('btnTextOne').addClass('btnText');
		btn.style.cursor = 'no-drop';
		clock = setInterval(doLoop, 1000); //一秒执行一次
	}
	function doLoop()
	{
		nums--;
		if(nums > 0){
			btn.value = nums+'秒后可重新获取';
		}else{
			clearInterval(clock); //清除js定时器
			btn.disabled = false;
			btn.value = '点击发送验证码';
			$('#codebtn').removeClass('btnText').addClass('btnTextOne');
			btn.style.cursor = 'pointer';
			nums = 60; //重置时间
		}
	}
</script>
</body>
</html>