欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

注册贵美商城

程序员文章站 2022-07-16 16:26:17
...
<html	xmlns="http://www.w3.org/1999/xhtml">
<head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"	/>
 <title>贵美商城</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" />阅读贵美网服务协议 </h4>
        	<textarea id="textarea" cols="30" rows="15">欢迎阅读服务条款协议,本协议阐述之条款和条件适用于您使用Gmgw.com网站的各种工具和服务。
   本服务协议双方为贵美与贵美网用户,本服务协议具有合同效力。 
   贵美的权利和义务
      1.贵美有义务在现有技术上维护整个网上交易平台的正常运行,并努力提升和改进技术,使用户网上交易活动的顺利。 
      2.对用户在注册使用贵美网上交易平台中所遇到的与交易或注册有关的问题及反映的情况,贵美应及时作出回复。 
      3.对于在贵美网网上交易平台上的不当行为或其它任何贵美认为应当终止服务的情况,贵美有权随时作出删除相关信息、终止服务提供等处理,而无须征得用户的同意。 
      4.因网上交易平台的特殊性,贵美没有义务对所有用户的注册资料、所有的交易行为以及与交易有关的其他事项进行事先审查。 	
    		 </textarea>
    	</td>      	
      </tr>
      <tr class="register_table_line">
        <td class="input_title" >名字:</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" >姓氏:</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"  >登录名:</td>
        <td class="input_content">
        	<input name="sname" type="text" class="reg_text" size="24" />(可包含 a-z、0-9 和下划线)
        </td>
      </tr>
      <tr class="register_table_line">
        <td class="input_title" >密码:</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" >再次输入密码:</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" >电子邮箱:</td>
        <td class="input_content">
        	<input id="email"  type="text" class="reg_text" size="24" value="请输入正确的邮箱" />
            <span id="emailSpan" class="red"></span>
        </td>
      </tr>
      <tr class="register_table_line">
        <td class="input_title" >性别:</td>
        <td class="input_content">
    		<input id="gen" style="border:0px;" type="radio" value="男" checked="checked" />
            <img src="images/Male.gif" width="23" height="21" alt="alt" />男&nbsp;
            <input name="gen" style="border:0px;" type="radio" value="女" class="input" />
    	    <img src="images/Female.gif" width="23" height="21" alt="alt" />女
        </td>
      </tr>
      <tr class="register_table_line">
        <td class="input_title" >头像:</td>
        <td class="input_content"><input type="file" /></td>
      </tr>    
      <tr class="register_table_line">
        <td class="input_title" >爱好:</td>
        <td class="input_content">
    	  <label>
    	  	<input type="checkbox" id="checkbox" value="checkbox" />
    	  </label>
    		  运动&nbsp;&nbsp;
    	  <label>
    	  <input type="checkbox" id="checkbox2" value="checkbox" />
    	  </label>
    		聊天&nbsp;&nbsp;
    	  <label>
    		<input type="checkbox" id="checkbox3" value="checkbox" />
    	  </label>
    		玩游戏
    	</td>
      </tr>
      <tr class="register_table_line">
        <td class="input_title">出生日期:</td>
        <td class="input_content">
    		<input id="nYear" class="reg_text n4"  value="yyyy" maxlength="4" />&nbsp;年&nbsp;&nbsp;
            <select id="nMonth">
              <option value="" selected="selected">[选择月份]</option>
              <option value="0">一月</option>
              <option value="1">二月</option>
              <option value="2">三月</option>
              <option value="3">四月</option>
              <option value="4">五月</option>
              <option value="5">六月</option>
              <option value="6">七月</option>
              <option value="7">八月</option>
              <option value="8">九月</option>
              <option value="9">十月</option>
              <option value="10">十一月</option>
              <option value="11">十二月</option>
            </select>&nbsp;月&nbsp;&nbsp;
    		<input id="nDay"  class="reg_text n4"  value="dd" size="2" maxlength="2" />日
    	</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" οnclick="javascript:form1.reset();" style="cursor:pointer;" alt="重置" />
    	</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>

 

//全局变量
var user, //名字
	lname, //姓氏
	pwd, //密码
	rePwd, //确认密码
	email; //Email
	
//根据id获取元素
function $(id){
	return document.getElementById(id);
}

window.onload = function(){	
	user = $("fname"); //获取名字文本框对象
	//名字文本框获取焦点事件
	user.onfocus = function(){
		this.style.borderColor = "red";
	}
	//名字文本框失去焦点事件
	user.onblur = checkUser;			
	
	lname = $("lname"); //获取姓氏文本框对象
	lname.onfocus = function(){
		this.style.borderColor = "red";
	}			
	lname.onblur = checkLname;
	
	pwd = $("pass"); //获取密码框对象
	pwd.onfocus = function(){
		this.style.borderColor = "red";
	}			
	pwd.onblur = checkPwd;
	
	rePwd = $("rpass"); //获取确认密码框对象
	rePwd.onfocus = function(){
		this.style.borderColor = "red";
	}			
	rePwd.onblur = checkRePwd;	
	
	email = $("email"); //获取邮箱文本框对象
	email.onfocus = function(){
		if(this.value =="请输入正确的邮箱"){
			this.value="";
		}
		this.style.borderColor = "red";
	}			
	email.onblur = checkEmail;
	
	//给表单注册提交事件
	document.myform.onsubmit = function(){return check();}
}

//名字文本框验证
function checkUser(){
	$("user").innerHTML="";	
	if("" == user.value){
		$("user").innerHTML = "名字不能为空";
		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 ="名字中不能包含数字";
			return false;
		}	
	}
	user.style.borderColor = "";
	return true;
}

//姓氏文本框验证
function checkLname(){
	$("lnameSpan").innerHTML="";		
	if("" == lname.value){
		$("lnameSpan").innerHTML = "姓氏不能为空";
		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 ="姓氏中不能包含数字";
			return false;
		}	
	}
	lname.style.borderColor = "";
	return true;
}

//密码框验证
function checkPwd(){
	$("passSpan").innerHTML="";
	if("" == pwd.value){
		$("passSpan").innerHTML="密码不能为空";
		return false;
	}
	if(pwd.value.length < 6){
		$("passSpan").innerHTML="密码必须等于或大于6个字符";
		return false;
	}
	pwd.style.borderColor = "";
	return true;
}

//确认密码框验证
function checkRePwd(){
	$("repassSpan").innerHTML="";
	if(pwd.value != rePwd.value){
		$("repassSpan").innerHTML="两次输入的密码不一致";
		return false;
	}
	rePwd.style.borderColor = "";
	return true;
}

//邮箱文本框验证
function checkEmail(){
	$("emailSpan").innerHTML="";				
	if("" == email.value){
		email.value = "请输入正确的邮箱";			
		$("emailSpan").innerHTML="Email不能为空";
		return false;
	}
	
	if(-1 == email.value.indexOf("@") || -1 == email.value.indexOf(".")){
		$("emailSpan").innerHTML="Email格式不正确必须包含@和.";					
		return false;
	}	
	email.style.borderColor = "";
	email.style.color = "#000";
	return true;
}

//表单提交验证
function check(){			
	if(checkUser()&&checkLname()&&checkPwd()&&checkRePwd()&&checkEmail()){
		return true;
	}		
	return false;
} 

 

效果图:
注册贵美商城

 

个人E-mail: