﻿<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=800, user-scalable=no">
    <title>啊Q傳記Online - aq8858</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/owl.carousel.min.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/mobile.css">
    <link rel="icon" href="images/favicon.ico">
    <style type="text/css">
<!--
.STYLE1 {font-family: MingLiu, sans-serif;color: #565555;}
.table-c table td{font-size: 16px; padding: 5px 5px 5px 5px;border-bottom-width: 0px;border-top-style: none;border-right-style: none;border-bottom-style: solid;border-left-style: none;border-bottom-color: #e3d6d6;}
.table-c table a {
    text-decoration: none;
    color: #ff0000;}

-->
    </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'>请输入您的會員账户</font>";

  		}else{
    			document.getElementById("test_user").innerHTML = "<font color='green' 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' 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>
    <div class="depth">
      <div class="wrap">
        <a class="open_menu" href="javascript:void(0);">
          <span class="btn">
            <span></span>
            <span></span>
            <span></span>          </span>        </a>        <div class="game_ui">
          <a class="logo" href="http://aq8858.com"></a>        </div>        
		  <div class="game_link">
          <a class="btn_fb" href="#" target="_blank" title="discord"></a>
       </div>
      </div>
    </div>
    <nav>
            <ul>
        <!--<li><a href="../portal.php?mod=view&aid=2" target="_blank">遊戲介紹</a></li>-->
        <!--<li><a href="../portal.php?mod=view&aid=1">程序下載</a></li>-->
        <!--<li><a href="../pay/members.jsp" target="_blank">會員中心</a></li>-->
      </ul>
    </nav>
    <header>
      <div id="lightarea"></div>
      <div class="wrap">
        <div class="people"><img src="images/main/char.png"></div>
        <div class="slogan"><img src="images/main/slogan.png"></div>
<div class="content" id="content">
 
      <div id="BOX2" style="display: block;">
        <div class="abgne_tab">
          <div class="tab_container">
            <div id="tab4" class="tab_content">
              <h2>申請會員賬號</h2>	
        <div id="table-c" class="table-c">
          <table width="700" 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" align="left"></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" align="left"></td>
              </tr>
              <tr>
                <td height="30" align="right">郵箱：</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="请输入您的電子信箱，賬號信息重要憑證" onBlur="validate_email(this.value)"/ >
                </td>
                <td id="test_email" align="left"></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>
          </div>
        </div>
      </div>
    </div>
</div>
</div>
    </header>

    <footer>
      <div class="copyright">
        <p>Copyright © aq8858.com Inc. All rights reserved. </p>
      </div>
    </footer>
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <script src="js/lightrise.js"></script>
    <script src="js/owl.carousel.js"></script>
    <script src="js/action.js"></script>
  <script src="js/rocket-loader.min.js"></script>
	
</body>
</html>
