注册功能

app/css/app.css

@@ -59,6 +59,7 @@ body{ color: #666666; font-size:14px;}
/*.frmbtn:hover{border:1px solid #FF9900; color:#FFFFFF;background-color:#FF9900;}*/
.frmbox{ border:none; width: 90%; height: 100%; }
.frmactive{color:#fff;background-color:#FF9900;}
.frmactive2{color:#fff;background-color:#ccc; border:1px solid #ccc;}
.exitbtn{ border:none; margin: 0; color:#FF0000; border-radius: 0;}
/*///////////////common公共样式///////////////////////*/

app/html/reg.html

@@ -20,13 +20,14 @@
					<img class="logoimg" src="../images/logo.png" />
				</a>
			</div>
		    <form class="mui-input-group frmbox">
		    <form class="mui-input-group frmbox" id="frmbox">
		        <div class="mui-input-row frm-input">
		            <input type="text" class="mui-input-clear frmtype" placeholder="请输入您的手机号">
		            <input type="tel" class="mui-input-clear frmtype" placeholder="请输入您的手机号" id="username">
		        </div>
		        <div class="mui-input-row frm-input">
					<input id='password' type="password" class="mui-input-clear frmtype" placeholder="请输入验证码">
					<a class="forgetword">获取验证码</a>
					<input type="number" class="mui-input-clear frmtype" placeholder="请输入验证码" id="set-code">
					<a class="forgetword" id="obtain-code">获取验证码</a>
					<a class="forgetword" id="getcodeoff" style="display:none;"></a>
				</div>
		    </form>
		    
@@ -39,20 +40,17 @@
	                     <input type="checkbox" name="checkbox" checked="true" style="display:none;">已同意<a href="" class="protocollink" target="_blank">科袖网用户协议</a>
	               </label>
		    	</div>
					
					
				
		    	<button id='reg' class="mui-btn mui-btn-block frmbtn frmactive">注&nbsp;册</button>
			
		    	<button id='reg' class="mui-btn mui-btn-block frmbtn frmactive" style="display:none;">注&nbsp;册</button>
		    	<button class="mui-btn mui-btn-block frmbtn frmactive2">注&nbsp;册</button>
				<button id='login' class="mui-btn mui-btn-block mui-btn-outlined frmbtn">返回登录</button>
				
			</div>
			
		</div>
		
		<script src="../js/public/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<script src="../js/public/base.js"></script>
		<script src="../js/register.js"></script>
	</body>
</html>

app/html/setpass.html

@@ -28,14 +28,13 @@
			    </form>
			    
			    <div class="mui-content-padded frmbox">
					<button class="mui-btn mui-btn-block frmbtn frmactive">完&nbsp;成</button>
					<button class="mui-btn mui-btn-block frmbtn frmactive" id="registerok">完&nbsp;成</button>
				</div>
			</div>
		</div>
		<script src="../js/public/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<script src="../js/public/base.js"></script>
		<script src="../js/register-setpass.js"></script>
	</body>
</html>

app/js/public/base.js

@@ -0,0 +1,3 @@
//公共文件
var baseUrl="http://192.168.3.173:8080",
    toastStyle={'verticalAlign':'top'}

app/js/register-setpass.js

@@ -0,0 +1,80 @@
//注册信息设置密码
mui.init();
mui.plusReady(function(){
	
	/*定义全局变量*/
	var passWord = document.getElementById("password");
	var passwordOK = document.getElementById("password2");
	var registerOk = document.getElementById("registerok");
	var oldPass = false;
	var isPass = false;
	var self=plus.webview.currentWebview();
	
	/*校验第一个密码*/
	passWord.addEventListener('blur', function() {
		valOld();
	});
	
	/*校验确认密码*/
	passwordOK.addEventListener('blur', function() {
		valNew();
	});
	
	//完成注册
	registerOk.addEventListener('tap', function() {
		completeReg();
	});
    
	function valOld(){
		if(passWord.value.length==0){
			plus.nativeUI.toast("密码不能为空",toastStyle);
			oldPass = false;
		}else if(passWord.value.length < 6){
			plus.nativeUI.toast("密码不少于6位，请输入正确的密码",toastStyle);
		}else{
			oldPass = true;
		}
	}
	
	function valNew(){
		if(passwordOK.value.length==0){
			plus.nativeUI.toast("密码不能为空",toastStyle);
			isPass = false;
		}else if(passwordOK.value.length<6){
			plus.nativeUI.toast("密码长度过短,至少六位",toastStyle);
			isPass = false;
		}else if(passwordOK.value != passWord.value){
			plus.nativeUI.toast("两次密码不一致",toastStyle);
			isPass = false;
		}else{
			isPass = true;
		}
	}
	
	function completeReg(){
		if(oldPass&&isPass){
			mui.ajax(baseUrl+'/ajax/regmobile',{
				data:{state:self.state,mobilePhone:self.phoneName,validateCode:self.setCode,password:passwordOK.value},
				dataType: 'json', //数据格式类型
				type: 'post', //http请求类型
				async: false,
				timeout: 10000, //超时设置
				success: function(data) {
						console.log(data)
					if(data.success) {
						state=data.data;
						console.log(state)
						plus.nativeUI.toast("注册成功",toastStyle);
					}
				},
				error: function() {
						plus.nativeUI.toast("服务器链接超时",toastStyle);
				}
			});	
		}else{
			valOld();
			valNew();
		}
	}
	
})

app/js/register.js

@@ -0,0 +1,178 @@
//注册信息
mui.init();
mui.plusReady(function(){
	
	/*定义全局变量*/
	var phoneName = document.getElementById("username");
	var setCode = document.getElementById("set-code");
	var obtainCode = document.getElementById("obtain-code");
	var reg = document.getElementById("reg");
	var phoneCode=false;
	var codeVal2 = false;
	var state = 0;
		
	phoneName.addEventListener('blur', function() {
		phoneVal();
	});
	
	setCode.addEventListener('blur', function() {
		codeVal();
	});
	/*点击获取验证码*/
	obtainCode.addEventListener('tap',function(){
		//console.log(phoneCode)
		sendAuthentication();
	})
	
	/*注册按钮*/
	reg.addEventListener('tap',function(){
		if(phoneCode&&codeVal2){
			mui.openWindow({
      			url:'setpass.html',
      			id:'setpass.html',
      			extras:{
					phoneName:phoneName.value,
					setCode:setCode.value,
					state:state
				}
      		});	
		}else{
			phoneVal();
			codeVal();	
		}
	})
	
	/*校验手机号*/
	function phoneVal(){
		var hunPhone=/^1[3|4|5|7|8]\d{9}$/;
		if(phoneName.value.length==0){
			plus.nativeUI.toast("手机号不能为空",toastStyle)
			document.querySelector('.frmactive').style.display="none";
			document.querySelector('.frmactive2').style.display="block";
			phoneCode=false;
      	}else{
			if(hunPhone.test(phoneName.value)){
				isReg(); 
			}else{
				plus.nativeUI.toast("请输入正确的手机号码",toastStyle);
				phoneCode=false;
			}
		}
	}
	
	/*校验用户名是否注册*/
	function isReg() {
		mui.ajax(baseUrl+'/ajax/isReg?key='+phoneName.value,{
			dataType: 'json', //数据格式类型
			type: 'GET', //http请求类型
			timeout: 10000, //超时设置
			success: function(data) {
				if(data.data == false) {
					//mui.back();
					phoneCode=false;
					//alert(phoneCode);
					plus.nativeUI.toast("您的手机已被注册",toastStyle);
				}else{
					//plus.nativeUI.toast(phoneCode,toastStyle);
					phoneCode=true;
					return phoneCode; 
				}
			},
			error: function() {
					plus.nativeUI.toast("服务器链接超时",toastStyle);
					phoneCode=false;
					
			}
		})
	}
	/*手机发送验证码*/
	function sendAuthentication(){
		console.log(phoneCode)
		if(phoneCode){
			mui.ajax(baseUrl+'/ajax/regmobilephone',{
				data:{mobilePhone:phoneName.value},
				dataType: 'json', //数据格式类型
				type: 'GET', //http请求类型
				async: false,
				timeout: 10000, //超时设置
				success: function(data) {
					if(data.success) {
						state=data.data;
						console.log(state)
						doClick();
					}
				},
				error: function() {
						plus.nativeUI.toast("服务器链接超时",toastStyle);
				}
			})
		}
	}
	
	/*30s后重新获取验证码*/
	function doClick() {
		var getCodeOff = document.getElementById("getcodeoff");
		obtainCode.style.display = "none";
		getCodeOff.style.display = "block";
		getCodeOff.innerHTML = "30s后重新获取";
		var clickTime = new Date().getTime();
		var Timer = setInterval(function() {
			var nowTime = new Date().getTime();
			var second = Math.ceil(30 - (nowTime - clickTime) / 1000);
			if(second > 0) {
				getCodeOff.innerHTML = second + "s后重新获取";
			} else {
				clearInterval(Timer);
			    obtainCode.style.display = "block";
				getCodeOff.style.display = "none";
				obtainCode.innerHTML = "获取验证码";
			}
		}, 1000);
	}
	
	/*校验验证码*/
	function codeVal(){
		//console.log(state)
		if(setCode.value.length==0){
			plus.nativeUI.toast("验证码不能为空",toastStyle);
			codeVal2 = false;
			document.querySelector('.frmactive').style.display="none";
			document.querySelector('.frmactive2').style.display="block";
      	}else{
      		document.querySelector('.frmactive2').style.display="none";
		    document.querySelector('.frmactive').style.display="block";
      		mui.ajax(baseUrl+'/ajax/validCode',{
				data:{"state":state,"vc":setCode.value},
				dataType: 'json', //数据格式类型
				async: false,
				type: 'POST', //http请求类型
				timeout: 10000, //超时设置
				success: function(data) {
					console.log(data.data);
					if(data.success){
						console.log(data.success);
						if(data.data){
							//plus.nativeUI.toast("验证码输入正确",toastStyle);
							codeVal2 = true;
						}else{
							plus.nativeUI.toast("验证码不正确",toastStyle);
							codeVal2 = false;
						}
					}else{
						plus.nativeUI.toast("验证超时",toastStyle);
						codeVal2 = false;
						console.log(data.msg);
					}
				},
				error: function() {
						plus.nativeUI.toast("服务器链接超时",toastStyle);
						codeVal2 = false;
				}
			})
      	}
	}
	
	
})