<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>咕咕戀曲會員管理中心</title>
<meta name="keywords" content="咕咕戀曲" />
<meta name="description" content="咕咕戀曲" />
<link href="img/style_ga.css" rel="stylesheet" type="text/css" />
<link rel="Shortcut Icon" href="favicon.ico" />
<link rel="Bookmark" href="favicon.ico" />
<script language="javascript" type="text/javascript" src="img/common.js"></script>
<style type="text/css">
<!--
td{margin:0;  padding: 10px 10px 10px 10px;border-bottom-width: 0px;border-top-style: none;border-right-style: none;border-bottom-style: solid;border-left-style: none;border-bottom-color: #e3d6d6;}
.STYLE1 {font-family: MingLiu, sans-serif;color: #565555;}
.table-c table{border-right:1px solid #e3d6d6;border-bottom:1px solid #e3d6d6;}
.table-c table td{border-left:1px solid #e3d6d6;border-top:1px solid #e3d6d6;font-size: 14px; padding: 10px 100px 10px 10px;}

-->
</style>
</head>
<script type="text/javascript">
	//onblur失去焦点事件，用户离开输入框时执行 JavaScript 代码：
	//函数1：验证邮箱格式
  	function validate_username(username){
  		//定义正则表达式的变量:邮箱正则
  		var usernamReg=/^[a-zA-Z][0-9a-zA-Z]{5,11}$/;
  		//console.log(username);
  		if(username != "" && usernamReg.test(username))
  		{
    			document.getElementById("test_user").innerHTML = "<font color='green' size='3px'>√</font>";


  		}else{
  					document.getElementById("test_user").innerHTML = "<font color='red' size='3px'>賬號錯誤!</font>";
  		}
  	}
	//函数1：验证邮箱格式
  	function validate_email(email){
  		//定义正则表达式的变量:邮箱正则
  		var emailReg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
  		//console.log(username);
  		if(email !="" && email.search(emailReg) != -1)
  		{
  			document.getElementById("test_email").innerHTML = "<font color='green' size='3px'>√!</font>";
  		}else{
  			document.getElementById("test_email").innerHTML = "<font color='red' size='3px'>郵箱錯誤</font>";
  		}
  	}
 	//函数2：验证密码是否符合要求：匹配6位密码，由数字和字母组成：
  	function validate_password(password){
  		//^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6-10}$
		//测试密码：12345y
  		var passwordReg=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,11}$/;
  		if(password != "" && passwordReg.test(password))
  		{
  			document.getElementById("test_pw").innerHTML = "<font color='green' size='3px'>√</font>";
  		}else{
  			document.getElementById("test_pw").innerHTML = "<font color='red' size='3px'>密碼錯誤!</font>";

  		}
  	}
  	
	//函数3：验证两次输入的密码是否一样
  	 function validate_password2(password2){
  		var password = document.getElementById("passwd").value;
  		//测试：console.log(password);
  		//测试：console.log(password2);
  		if (password == ""){
			document.getElementById("is_test_pw").innerHTML = "<font color='red' size='3px'>檢查密碼!</font>";
		}else if(password==password2){
  			document.getElementById("is_test_pw").innerHTML = "<font color='green' size='3px'>√</font>";
  		}else{
  			document.getElementById("is_test_pw").innerHTML = "<font color='red' size='3px'>密碼錯誤!</font>";

  		}
  	} 
   	//函数2：phone：
  	function validate_phone(phone){
  		//^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6-10}$
		//测试密码：12345y
  		var phoneReg=/^[0-9]+.?[0-9]{10,11}$/; 
  		if(phone != "" && phoneReg.test(phone))
  		{
  			document.getElementById("test_phone").innerHTML = "<font color='green' size='3px'>√</font>";
  		}else{
  			document.getElementById("test_phone").innerHTML = "<font color='red' size='3px'>'11' 位, 不夠位數, 請前方 '0' !</font>";

  		}
  	}	
	//函数4：验证表单是否已经填好
  	function validate_form(){
  		var username = document.getElementById("username").value;
  		var email = document.getElementById("email").value;
  		var phone = document.getElementById("phone").value;
  		var password = document.getElementById("passwd").value;
  		var password2 = document.getElementById("repasswd").value;
  		//console.log("表单填写正确，可以正常提交！");
  	
  		//这三个，如果任何一个有问题，都返回false
  		//18128@qq.com		12345y
  		  var usernamReg=/^[a-zA-Z][0-9a-zA-Z]{5,11}$/;
  		var emailReg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
  		var passwordReg=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,11}$/;
  		var phoneReg=/^[0-9]+.?[0-9]{10,11}$/; 
  		if(username != "" && usernamReg.test(username)){
  			if(password !="" && passwordReg.test(password)){
  				if(password2==password){
  					alert("正確");
  					console.log("正確");
  					return true;
  				}else{
  					alert("錯誤，重新填寫!");
  					console.log("錯誤，重新填寫!");
  					return false;
  				}
  			}else{
  				alert("密碼格式錯誤!");
  				console.log("密碼格式錯誤!");
  				return false;
  			}
  		}else{
  			alert("賬號格式錯誤!");
  			console.log("賬號格式錯誤!");
  			return false;
  		}
  	}
  </script>
<body>
<div class="ga_top_778"></div>
	<div class="ga_content_778">
		<div class="ga_contents" align="center">
						<img src="img/xuxian.gif" />
<div id="table-c">
          <table width="730" border="0" align="center" cellpadding="0" cellspacing="1" class="mytable">
            <form name="f1" action="" method="post" onSubmit="return checkfrom(this)">
              <tr>
                <td height="30" width="160" align="right">賬號：</td>
                <td align="left" width="320"><input name="username" type="text" id="username" class="app_input" maxlength="20" style="width:300px; height:30px; font-size:16px;" placeholder="6-12 位，第一位必須是小寫英文" onBlur="validate_username(this.value)"/ >
                </td>
                <td id="test_user" align="left" width="285"></td>
              </tr>
              <tr>
                <td height="30" align="right">密碼：</td>
                <td align="left"><input name="passwd" type="password" id="passwd" class="app_input" maxlength="20" style="width:300px; height:30px; font-size:16px;" placeholder="字母、數字, 6-20 位" onBlur="validate_password(this.value)"/>
                </td>
                <td id="test_pw"></td>
              </tr>
              <tr>
                <td height="30" align="right">確認密碼：</td>
                <td align="left"><input name="repasswd" type="password" id="repasswd" class="app_input" maxlength="20" style="width:300px; height:30px; font-size:16px;" placeholder="再次輸入密碼" onBlur="validate_password2(this.value)" />
                </td>
                <td id="is_test_pw"></td>
              </tr>
              <tr>
                <td height="30" align="right">Email：</td>
                <td align="left"><input name="email" type="email" id="email" class="app_input" maxlength="40" style="width:300px; height:30px; font-size:16px;" placeholder="Email，重要憑證" onBlur="validate_email(this.value)"/ >
                </td>
                <td id="test_email"></td>
              </tr>

              <tr>
                <td height="30" colspan="3" align="center"><span class="STYLE1">已經有賬號！</span><a href="members.jsp" target="_blank">登入會員系統</a></td>
              </tr>
              <tr>
                <input type="hidden" name="ptype" value="login" id="faceValue"/>
                <td height="30" colspan="3" align="center"><input name="Submit" type="submit" class="btn2 " value="確認" onClick="return validate_form()" style="width:120px; height:40px;cursor:pointer; font-size:16px;" />
                  &nbsp&nbsp
                  <input type="reset" name="reset" value="重寫" style="width:120px; height:40px; cursor:pointer; font-size:16px;"></td>
              </tr>
            </form>
          </table>

        </div>
				<img src="img/xuxian.gif" />
				<div align="center" ><span class="STYLE1">Powered by guguseal.COM </span></div>
		</div>
	</div>
<div class="ga_bottom_778"></div>
</body>
</html>
