﻿<!DOCTYPE html>
<html lang="zh-TW">

<head>
  <title>天使學院Online - 會員中心</title>
  <meta charset="UTF-8" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <meta name="title" content="天使學院 Online - 會員中心" />
  <meta name="keywords" content="天使學院 Online - 會員中心" />
  <meta name="description" content="天使學院 Online - 會員中心" />

  <link rel="shortcut icon" href="favicon.ico" />

  <link rel="stylesheet" href="css/font-awesome.min.css" />

  <link rel="stylesheet" href="css/bootstrap.min.css" />
  <link rel="stylesheet" href="css/animate.css" />

  <!-- AJAX -->
  <link rel="stylesheet" href="css/navbar.css" />
  <link rel="stylesheet" href="css/ft.css" />

  <link rel="stylesheet" href="css/style.css" />
  <link rel="stylesheet" href="css/modalsText.css" />
  <link rel="stylesheet" href="css/deviceH.css" />

  <!-- HTML5 shim 和 Respond.js 讓IE8支援HTML5元素和媒體查詢 -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
		<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;}
-->
</style>
</head>
<script type="text/javascript">
	//onblur失去焦点事件，用户离开输入框时执行 JavaScript 代码：
	//函数1：验证邮箱格式
  	function validate_username(username){
  		//定义正则表达式的变量:邮箱正则
  		var usernamReg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
  		//console.log(username);
  		if(username.length < 6 || username.length > 12)
  		{
			document.getElementById("test_user").innerHTML = "<font color='red' size='3px'>Please enter the game account!</font>";

  		}else{
    			document.getElementById("test_user").innerHTML = "<font color='green' size='3px'>√Account format is correct!</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'>√Emailf ormat is correct!</font>";
  		}else{
  			document.getElementById("test_email").innerHTML = "<font color='red' size='3px'>Email format error!</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'>Password format error!</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'>Please enter the password!</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'>The verification password is incorrect!</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' digits, insufficient digits, Add '0' in front!</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 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 != "" && emailReg.test(email) && phoneReg.test(phone) && username.length > 5 && username.length < 12){
  			if(password !="" && passwordReg.test(password)){
  				if(password2==password){
  					alert("The information entered is correct!");
  					console.log("The information entered is correct!");
  					return true;
  				}else{
  					alert("Verify password is wrong! fill in again!");
  					console.log("Verify password is wrong! fill in again!");
  					return false;
  				}
  			}else{
  				alert("The password is in the wrong format!");
  				console.log("The password is in the wrong format!");
  				return false;
  			}
  		}else{
  			alert("The account format is wrong!");
  			console.log("The account format is wrong!");
  			return false;
  		}
  	}
  </script>

<body data-spy="scroll" data-target="#myScrollspy" data-offset="50">
  <div id="gs_nav">
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="nav-main">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a target="_blank" class="navbar-brand" href="../index.html"><img src="image/gs_logo.png"
              alt="GWJOY" /></a>
        </div>

        <div class="collapse navbar-collapse goh_style">          <ul class="nav navbar-nav navbar-right">
            <li><a href="../index.html">遊戲主頁</a> </li>
            <li><a href="../pay/members.jsp">會員中心</a></li>
            <li><a target="_blank" href="#">Discord</a></li>
            <li><a target="_blank" href="#">Twitter</a></li>
          </ul>
        </div>
      </div>
    </nav>
  </div>



 <div class="bg">
<header id="header" class="bg-img text-center">
	<div id="wrap">
		<div class="news_inner">
			<div class="news_detail_title"><span>申請賬號</span></div>
			<div class="news_detail_content" >
			
        <div id="table_c" align="left">
          <table width="98%" 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="100" align="left">遊戲賬戶：</td>
                <td align="left" width="280"><input name="username" type="text" id="username" class="app_input" maxlength="20" style="width:250px; 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="left">遊戲密碼：</td>
                <td align="left"><input name="passwd" type="password" id="passwd" class="app_input" maxlength="20" style="width:250px; 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="left">確認密码：</td>
                <td align="left"><input name="repasswd" type="password" id="repasswd" class="app_input" maxlength="20" style="width:250px; height:30px; font-size:16px;" placeholder="再次輸入密碼" onBlur="validate_password2(this.value)" />
                </td>
                <td id="is_test_pw"></td>
              </tr>
              <tr>
                <td height="30" align="left">電子信箱：</td>
                <td align="left"><input name="email" type="email" id="email" class="app_input" maxlength="30" style="width:250px; height:30px; font-size:16px;" placeholder="输入您的電子信箱，重要憑證" onBlur="validate_email(this.value)"/ >
                </td>
                <td id="test_email"></td>
              </tr>
              <tr>
                <td height="30" align="left">電話號碼：</td>
                <td align="left"><input name="phone" type="text" id="phone" class="app_input" maxlength="11" style="width:250px; height:30px; font-size:16px;" placeholder="输入您的電話號碼，重要憑證" onBlur="validate_phone(this.value)"/ >
                </td>
                <td id="test_phone"></td>
              </tr>
              <tr>
                <td height="30" colspan="3" align="left"><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="left"><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>
			</div>
	</div>
	</div>
</header>
  </div>

 

  <footer>
    <div class="container">
      <div class="copyright">
        <ul class="clearfix">
          <li><img src="image/logo_mangot5.png" /></li>
          <li>
            <p>© S1596.COM Co., Ltd. <br />
              All Rights Reserved.</p>
          </li>
        </ul>

      </div>
    </div>
  </footer>

</body>

</html>