Register your beautiful mall

Recommended for you: Get network issues from WhatsUp Gold. Not end users.
<html	xmlns="http://www.w3.org/1999/xhtml">
<head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"	/>
 <title>Your beautiful mall</title>
 <link rel="stylesheet"	type="text/css"	href="css/global.css"	/>
 <link rel="stylesheet"	type="text/css"	href="css/layout.css"	/>

</head>
<body>
  <div id="container">
  
	<iframe id="head" runat="server" src="head.htm" width="980px" height="136px" frameborder="0" scrolling="no">
 	</iframe>

    <form id="form1" method="post" action="register_success.htm"  name="myform">
    <table id="main" class="reg_bg" cellpadding="0px">
      <tbody>
      <tr class="h58">
      	<td colspan="3">&nbsp;</td>
        <td rowspan="11">
    		<h4><img src="images/read.gif" alt="alt" />Reading your open service agreement </h4>
        	<textarea id="textarea" cols="30" rows="15">Please read the terms of service agreement, the provisions of this Agreement and the conditions for tools and services for your use of the Gmgw.com website. 
   The service agreement for your beauty and your U.S. users, the service agreement with the validity of the contract.  
   The rights and obligations of your beauty
      Normal operation 1 of your beauty has the obligation to maintain the online trading platform in the existing technology, and efforts to upgrade and improve technology, users of online transactions smoothly.  
      2 the registered user to use your beauty online trading platform and trading or registered in problems and reflect on the situation, your beauty should respond in a timely manner.  
      3 for inappropriate behavior in your open online trading platform or any other precious beauty that shall terminate the service, your beauty has the right to delete information at any time, terminate the service delivery process, without the consent of the user agreement.  
      4 because of the particularity of online trading platform, your beauty is not compulsory for all user registration information, transactions and transactions with all other matters related to the prior review.  	
    		 </textarea>
    	</td>      	
      </tr>
      <tr class="register_table_line">
        <td class="input_title" >Name: </td>
        <td class="input_content">
        	<input id="fname" type="text"  class="reg_text" size="24" />
            <span id="user" class="red"></span>
        </td>
      </tr>
      <tr class="register_table_line">
        <td class="input_title" >Surname: </td>
        <td class="input_content">
        	<input id="lname" type="text" class="reg_text" size="24" />
            <span id="lnameSpan" class="red"></span></td>
      </tr>
      <tr class="register_table_line">
        <td class="input_title"  >Login name: </td>
        <td class="input_content">
        	<input name="sname" type="text" class="reg_text" size="24" />(can contain A-Z, 0-9 and the underscore)
        </td>
      </tr>
      <tr class="register_table_line">
        <td class="input_title" >Cipher: </td>
        <td class="input_content">
        	<input id="pass" type="password" class="reg_text" size="26" />
            <span id="passSpan" class="red"></span></td>
      </tr>
      <tr class="register_table_line">
        <td class="input_title" >Enter the password again: </td>
        <td class="input_content">
        	<input id="rpass"  type="password" class="reg_text" size="26" />
            <span id="repassSpan" class="red"></span>
        </td>
      </tr>
      <tr class="register_table_line">
        <td class="input_title" >Electronic mailbox: </td>
        <td class="input_content">
        	<input id="email"  type="text" class="reg_text" size="24" value="Please enter a valid email address" />
            <span id="emailSpan" class="red"></span>
        </td>
      </tr>
      <tr class="register_table_line">
        <td class="input_title" >Gender: </td>
        <td class="input_content">
    		<input id="gen" style="border:0px;" type="radio" value="Male" checked="checked" />
            <img src="images/Male.gif" width="23" height="21" alt="alt" />Male&nbsp;
            <input name="gen" style="border:0px;" type="radio" value="Female" class="input" />
    	    <img src="images/Female.gif" width="23" height="21" alt="alt" />Female
        </td>
      </tr>
      <tr class="register_table_line">
        <td class="input_title" >Head: </td>
        <td class="input_content"><input type="file" /></td>
      </tr>    
      <tr class="register_table_line">
        <td class="input_title" >Hobbies: </td>
        <td class="input_content">
    	  <label>
    	  	<input type="checkbox" id="checkbox" value="checkbox" />
    	  </label>
    		  Movement&nbsp;&nbsp;
    	  <label>
    	  <input type="checkbox" id="checkbox2" value="checkbox" />
    	  </label>
    		Chat&nbsp;&nbsp;
    	  <label>
    		<input type="checkbox" id="checkbox3" value="checkbox" />
    	  </label>
    		Play a game
    	</td>
      </tr>
      <tr class="register_table_line">
        <td class="input_title">Date of birth: </td>
        <td class="input_content">
    		<input id="nYear" class="reg_text n4"  value="yyyy" maxlength="4" />&nbsp;Years&nbsp;&nbsp;
            <select id="nMonth">
              <option value="" selected="selected">[Select month]</option>
              <option value="0">January</option>
              <option value="1">February</option>
              <option value="2">March</option>
              <option value="3">April</option>
              <option value="4">May</option>
              <option value="5">June</option>
              <option value="6">July</option>
              <option value="7">August</option>
              <option value="8">September</option>
              <option value="9">October</option>
              <option value="10">November</option>
              <option value="11">December</option>
            </select>&nbsp;Month&nbsp;&nbsp;
    		<input id="nDay"  class="reg_text n4"  value="dd" size="2" maxlength="2" />Day
    	</td>
      </tr>
      <tr class="register_table_line">
        <td class="input_title h35" >&nbsp;</td>
        <td class="input_content h35">
    		<input type="image" id="Button" style="border:0px;" src="images/submit.gif" /> 
            <img src="images/reset.gif" onclick="javascript:form1.reset();" style="cursor:pointer;" alt="Reset" />
    	</td>
      </tr>
      <tr>
        <td colspan="2" class="h65">&nbsp;</td>	
      </tr>
      </tbody>
    </table>	
    </form>	
    	
	<iframe id="foot" runat="server" src="foot.htm" width="980px" height="150px" frameborder="0" scrolling="no">
    </iframe>
  </div><!--container	end-->
    
  <script type="text/javascript" src="js/script.js"></script>
</body>
</html>

 

//Global variables
var user, //Name
	lname, //Surname
	pwd, //Cipher
	rePwd, //Confirm password
	email; //Email
	
//According to the ID element
function $(id){
	return document.getElementById(id);
}

window.onload = function(){	
	user = $("fname"); //Gets the object name text box
	//The name text box to get focus events
	user.onfocus = function(){
		this.style.borderColor = "red";
	}
	//Name text box loses focus events
	user.onblur = checkUser;			
	
	lname = $("lname"); //Gets the object name text box
	lname.onfocus = function(){
		this.style.borderColor = "red";
	}			
	lname.onblur = checkLname;
	
	pwd = $("pass"); //The password box object
	pwd.onfocus = function(){
		this.style.borderColor = "red";
	}			
	pwd.onblur = checkPwd;
	
	rePwd = $("rpass"); //Get the confirmation password box object
	rePwd.onfocus = function(){
		this.style.borderColor = "red";
	}			
	rePwd.onblur = checkRePwd;	
	
	email = $("email"); //Get the email text object
	email.onfocus = function(){
		if(this.value =="Please enter a valid email address"){
			this.value="";
		}
		this.style.borderColor = "red";
	}			
	email.onblur = checkEmail;
	
	//To form the submit event registration
	document.myform.onsubmit = function(){return check();}
}

//Name text box verification
function checkUser(){
	$("user").innerHTML="";	
	if("" == user.value){
		$("user").innerHTML = "Name cannot be empty";
		return false;
	}			
	for(var i=0; i <user.value.length; i++){
		var j = user.value.substring(i,i+1);
		if(isNaN(j)==false){
			$("user").innerHTML ="The name cannot contain numbers";
			return false;
		}	
	}
	user.style.borderColor = "";
	return true;
}

//Name text box verification
function checkLname(){
	$("lnameSpan").innerHTML="";		
	if("" == lname.value){
		$("lnameSpan").innerHTML = "The name cannot be empty";
		return false;
	}			
	for(var i=0; i <lname.value.length; i++){
		var j = lname.value.substring(i,i+1);
		if(isNaN(j)==false){
			$("lnameSpan").innerHTML ="The name cannot contain numbers";
			return false;
		}	
	}
	lname.style.borderColor = "";
	return true;
}

//Password verification
function checkPwd(){
	$("passSpan").innerHTML="";
	if("" == pwd.value){
		$("passSpan").innerHTML="Password can not be empty";
		return false;
	}
	if(pwd.value.length <6){
		$("passSpan").innerHTML="The password must be equal to or greater than 6 characters";
		return false;
	}
	pwd.style.borderColor = "";
	return true;
}

//Confirm the password box verification
function checkRePwd(){
	$("repassSpan").innerHTML="";
	if(pwd.value != rePwd.value){
		$("repassSpan").innerHTML="The two passwords you entered do not match";
		return false;
	}
	rePwd.style.borderColor = "";
	return true;
}

//Email text box verification
function checkEmail(){
	$("emailSpan").innerHTML="";				
	if("" == email.value){
		email.value = "Please enter a valid email address";			
		$("emailSpan").innerHTML="Email cannot be empty";
		return false;
	}
	
	if(-1 == email.value.indexOf("@") || -1 == email.value.indexOf(".")){
		$("emailSpan").innerHTML="Email is not in the correct format must contain @.";					
		return false;
	}	
	email.style.borderColor = "";
	email.style.color = "#000";
	return true;
}

//The submission of the form validation
function check(){			
	if(checkUser()&&checkLname()&&checkPwd()&&checkRePwd()&&checkEmail()){
		return true;
	}		
	return false;
} 

 

Effect diagram:

 

Personal E-mail: chaoyi77@163.com


 

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Posted by Eden at December 14, 2013 - 3:19 PM