<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!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>
<link rel="stylesheet" type="text/css" href="css/basic.css" />
<link rel="stylesheet" type="text/css" href="css/register.css" />
<script type="text/javascript" src="js/register.js"></script>
</head>
<body>
<div class="header">
<div class="headerCon">
<ul class="headerLeft f_l">
<li class="phone f_l"><a href="###">掌上新蛋</a></li>
<li class="customer f_l"><a href="###">企业客户</a></li>
<li class="platform f_l"><a href="###">入驻开放平台</a></li>
</ul>
<ul class="headerRight f_r">
<li class="welcome f_l">上午好,欢迎来新蛋购物！</li>
<li class="help f_l"><a href="###">帮助中心</a></li>
<li class="service f_l" id="service">客户服务</li>
</ul>
<div class="service2" id="service2" style="display:none;"></div>
</div>
</div>
<div class="searchbar">
<div class="logo f_l"><a href="index" title="新蛋中国 - 全球领先的IT/数码网上购物商城-笔记本,电脑配件,数码相机,手机,办公设备,家电,百货"><img src="images/logo.jpg" width="322" height="65" /></a></div>
<h3 class="f_l"><i>新用户注册</i></h3>
</div>
<div class="caption">
<h3 class="f_l">邮箱注册</h3>
</div>
<div class="area">
<div class="register f_l">
<form action="register" method="post" name="registerForm">
<p><span class="text f_l"><i class="f_r">用户名：</i></span><span class="inputText f_l"><input type="text" id="username" name="uname" /></span><span id="usernameId" class="f_l"></span></p>
<p><span class="text f_l"><i class="f_r">输入密码：</i></span><span class="inputText f_l"><input type="password" id="password" name="upass" /></span><span id="passwordId" class="f_l"></span></p>
<p><span class="text f_l"><i class="f_r">再次输入：</i></span><span class="inputText f_l"><input type="password" id="password2" /></span><span id="password2Id" class="f_l"></span></p>
<p><span class="text f_l"><i class="f_r">验证码：</i></span><span class="inputText2 f_l"><input type="text" class="code f_l" id="code" /><input type="text" class="code2 f_l" readonly="readonly" id="createCode" /><a href="###" class="f_l" id="newCode">看不清楚，换一张</a></span><span class="f_l" id="codeId"></span></p>
<p><span class="text f_l"></span><span class="submit"><input type="submit" value="同意以下协议并提交注册" /></span></p>
</form>
<textarea readonly="readonly">
在注册前，敬请您阅读以下内容，在进行注册程序过程中点击"同意以上协议并注册"按钮即表示您已完全接受本协议项下的全部条款。一经用户成功注册，本协议立即生效。如果发生纠纷，注册会员不得以未仔细阅读为由进行抗辩。
。。。。
7.4 如双方就本协议内容或其执行发生任何争议，双方应尽力友好协商解决；协商不成时，任何一方均可向本协议签订地有管辖权的人民法院提起诉讼。
</textarea>
</div>
<div class="sidebar f_l">
<span class="span1">
<h3>已是新蛋会员</h3>
<a href="login">现在登录</a>
</span>
<span class="span2">
<h3>注册即享受</h3>
<p>正品行货、正规发票</p>
<p>全国配送、当天出库</p>
</span>
</div>
</div>
<div class="iconAndEmail">
<div class="icon">
<h3 class="f_l">关注我们：</h3>
<dl class="f_l">
<dt class="f_l"><a href="###"><img src="images/icon01.jpg" width="18" height="18" /></a></dt>
<dd class="f_l"><a href="###">人人网</a></dd>
</dl>
<dl class="f_l">
<dt class="f_l"><a href="###"><img src="images/icon02.jpg" width="18" height="18" /></a></dt>
<dd class="f_l"><a href="###">开心网</a></dd>
</dl>
<dl class="f_l">
<dt class="f_l"><a href="###"><img src="images/icon03.jpg" width="18" height="18" /></a></dt>
<dd class="f_l"><a href="###">新浪微博</a></dd>
</dl>
<dl class="f_l">
<dt class="f_l"><a href="###"><img src="images/icon04.jpg" width="18" height="18" /></a></dt>
<dd class="f_l"><a href="###">腾讯微博</a></dd>
</dl>
<dl class="f_l">
<dt class="f_l"><a href="###"><img src="images/icon05.jpg" width="18" height="18" /></a></dt>
<dd class="f_l"><a href="###">优酷视频</a></dd>
</dl>
</div>
</div>
<div class="footer">
<p class="footNav"><a href="###">关于我们</a>|<a href="###">联系我们</a>|<a href="###">人才招聘</a>|<a href="###">商家入驻</a>|<a href="###">广告服务</a>|<a href="###">手机新蛋</a>|<a href="###">友情链接</a>|<a href="###">销售联盟</a>|<a href="###">新蛋社区</a>|<a href="###">新蛋公益</a>|<a href="###">English Site</a></p>
<p>北京市公安局朝阳分局备案编号110105014669 | 京ICP证070359号 | 互联网药品信息服务资格证编号(京)-非经营性-2011-0034 | 新出发京零 字第大120007号</p>
<p>音像制品经营许可证苏宿批005号 | 出版物经营许可证编号新出发(苏)批字第N-012号 | 互联网出版许可证编号新出网证(京)字150号</p>
<p>网络文化经营许可证京网文[2011]0168-061号 Copyright © 2004-2014 新蛋newegg.com 版权所有</p>
<p>新蛋旗下网站：360TOP</p>
<span><a href="###"><img src="images/footer01.gif" width="108" height="40" /></a><a href="###"><img src="images/footer02.gif" width="108" height="40" /></a><a href="###"><img src="images/footer03.png" width="108" height="40" /></a><a href="###"><img src="images/footer04.png" width="112" height="40" /></a></span>
</div>
</body>
</html>
/* CSS Document */
/*公共样式*/
*{ margin:0; padding:0; word-break:break-all;}
body{ font-family:"宋体"; color:#666; font-size:12px; background:#fff;}
a{ color:#666; text-decoration:none;}
a:hover{ color:#666; text-decoration:none;}
a img{ border:none;}
.f_l{ float:left;}
.f_r{ float:right;}
span{ display:block;}
i{ font-style:normal;}
em{ font-style:normal;}
ul li{ list-style-type:none;}
.c{ clear:both;}
/* CSS Document */
/*标头*/
.header{ width:100%; height:24px; background:#f1f1f1; border-bottom:1px solid #e2e2e2;}
.header a{ color:#666;}
.header a:hover{ color:#1e4c9a; text-decoration:underline;}
.header .headerCon{ width:980px; height:24px; margin:0 auto; position:relative;}
.headerCon .headerLeft{ width:260px; height:12px; padding-top:7px;}
.headerCon .headerLeft li{ line-height:12px;}
.headerCon .headerLeft .phone{ background:url(../images/phone.jpg) no-repeat; margin-left:7px; width:72px; text-align:center;}
.headerCon .headerLeft .phone:hover{ background:url(../images/phoneHover.jpg) no-repeat;}
.headerCon .headerLeft .customer{ background:url(../images/customer.jpg) no-repeat; width:70px; text-align:center; padding-left:6px;}
.headerCon .headerLeft .customer:hover{ background:url(../images/customerHover.jpg) no-repeat;}
.headerCon .headerLeft .platform{ background:url(../images/platform.jpg) no-repeat; width:104px; text-align:center;}
.headerCon .headerLeft .platform:hover{ background:url(../images/platformHover.jpg) no-repeat;}
.headerCon .headerRight{ width:308px; height:23px; margin-top:1px;}
.headerCon .headerRight li{ height:23px; line-height:23px;}
.headerCon .headerRight .welcome{ width:164px; text-align:center;}
.headerCon .headerRight .help{ width:56px; text-align:center;}
.headerCon .headerRight .service{ width:73px; padding-left:11px; background:url(../images/choose.jpg) no-repeat 67px 0;}
/*客户服务的菜单*/
.service2{ width:146px; height:99px; background:url(../images/service2.png) no-repeat;border-left:1px solid #eee; border-bottom:1px solid #eee; border-right:1px solid #eee; position:absolute; top:24px; z-index:99; right:3px;}
/*logn图片和标题*/
.searchbar{ width:980px; height:86px; margin:0 auto;}
.searchbar .logo{ width:326px; height:86px;}
.searchbar .logo img{ padding:11px 0 0 4px;}
.searchbar h3{ height:50px; margin-left:23px; margin-top:18px; border-left:1px solid #d9d9d9; line-height:50px; font-family:"微软雅黑"; color:#484848; font-size:23px; font-weight:normal;}
.searchbar h3 i{ padding-left:26px;}
/*标题区*/
.caption{ width:979px; height:41px; border-bottom:1px solid #ccc; margin:10px auto 0 auto;}
.caption h3{ width:97px; height:41px; border-left:1px solid #ccc; border-right:1px solid #ccc; border-top:1px solid #ccc; background:#fff; text-align:center; line-height:40px; color:#666; font-weight:bold; font-size:14px;}
/*注册区*/
.area{ width:977px; height:408px; margin:0 auto 30px auto; border:1px solid #ccc; border-top:none; font-family:"Arial";}
.register{ width:742px; height:373px; padding-top:35px; border-right:1px solid #ccc;}
.register p{ height:32px; line-height:32px; margin-bottom:18px;}
.register p .text{ width:88px; height:32px; color:#676767;}
.register p .text i{ padding-right:14px;}
.register p .inputText{ width:252px; height:32px;}
.register p .inputText input{ width:242px; padding-left:8px; height:30px; border:1px solid #cfcfcf;}
.register p .inputText2{}
.register p .inputText2 .code{ width:54px; padding-left:8px; height:30px; border:1px solid #cfcfcf; margin-right:4px;}
.register p .inputText2 a{ color:#003399; text-decoration:none; margin-right:10px;}
.register p .inputText2 a:hover{ color:#003399; text-decoration:underline;}
.register p .inputText input,.register p .inputText2 .code{ line-height:30px; color:#484848;}
.register p .submit input{ width:205px; height:32px; line-height:32px; background:#f7661f; border:none; border-radius:3px; color:#fff; text-align:center; font-weight:bold; font-size:14px;}
.register p .submit input:hover{ background:#ff971c;}
.register textarea{ width:600px; height:100px; border:1px solid #cfcfcf; font-size:12px; font-weight:normal; color:#999; margin-left:88px; resize: none;}
/*--验证码样式*/
.code2{ border:none; width:116px; height:32px; background:url(../images/register/codeBj.jpg) no-repeat; margin-right:10px; text-align:center; font-size:20px; font-family:Arial; font-style:italic; font-weight:bold; color:#333; letter-spacing:10px;}
/*--侧栏*/
.sidebar{ width:234px;}
.sidebar span h3{ color:#7c7c7c; font-family:"微软雅黑"; font-size:16px; text-align:center; font-weight:bold;}
.sidebar .span1{ width:234px; height:116px; border-bottom:1px solid #ccc;}
.sidebar .span1 h3{ padding-top:40px;}
.sidebar .span2 h3{ padding-top:47px; padding-bottom:4px;}
.sidebar .span1 a{ color:#003399; display:block; margin-top:10px; text-align:center; font-size:16px;}
.sidebar .span1 a:hover{ text-decoration:underline;}
.sidebar .span2 p{ text-align:center; color:#7c7c7c; font-size:16px; padding-top:6px;}
/*图标和Email*/
.iconAndEmail{ width:980px; height:25px; margin:0 auto;}
.icon{ height:18px; width:540px; margin:0 auto;}
.icon h3{ font-weight:bold; font-size:12px; color:#484848; height:18px; width:80px; line-height:18px;}
.icon dl{ }
.icon dl dt{ width:24px;}
.icon dl dd{ padding-right:24px; line-height:18px;}
.icon dl dd a{ color:#666; text-decoration:none;}
.icon dl dd a:hover{ color:#666; text-decoration:underline;}
/*底部备案信息*/
.footer{ width:980px; height:220px; margin:10px auto 0 auto; border-top:1px solid #e6e6e6;}
.footer p{ text-align:center; font-family:"Arial"; color:#666; line-height:18px;}
.footer .footNav{ height:60px; line-height:60px;}
.footer p a{ margin:0 10px;}
.footer p a:hover{ text-decoration:underline;}
.footer span{ width:478px; height:40px; margin:10px auto;}
.footer span img{ margin:0 4px;}
// JavaScript Document
//根据 id 获取元素
function $(id){
return document.getElementById(id);
}
window.onload = function(){
var serviceCount = 0;
$("service").onclick = function(){
if(serviceCount%2==0){
serviceOpen();
}else{
serviceClose();
}
serviceCount++;
};
//开机加载验证码图片，让它马上显示
createCodeOnclick();
//验证码图片
$("createCode").onclick = function(){
createCodeOnclick();
};
//换一张
$("newCode").onclick = function(){
createCodeOnclick();
};
//用户名验证
$("username").onfocus = function(){
usernameOnfocus();
};
$("username").onblur = function(){
usernameOnblur(this);
};
//密码验证
$("password").onfocus = function(){
passwordOnfocus();
};
$("password").onblur = function(){
passwordOnblur(this);
};
//确认密码
$("password2").onfocus = function(){
password2Onfocus();
};
$("password2").onblur = function(){
password2Onblur(this);
};
//验证码
$("code").onfocus = function(){
codeOnfocus();
};
$("code").onblur = function(){
codeOnblur(this);
};
//提交表单
document.registerForm.onsubmit = function(){
return check();
};
};
//客户服务菜单打开
function serviceOpen(){
var service = $("service");
var service2 = $("service2");
service.style.backgroundColor='#fff';
service.style.backgroundImage="url(images/chooseHover.jpg)";
service2.style.display='block';
}
//客户服务菜单关闭
function serviceClose(){
var service = $("service");
var service2 = $("service2");
service.style.backgroundColor='#f1f1f1';
service.style.backgroundImage="url(images/choose.jpg)";
service2.style.display='none';
}
var code;
//验证码图片
function createCodeOnclick(){
code = "";
var codeLength = 4;//验证码的长度
var checkCode = $("createCode");
var selectChar = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');//所有候选组成验证码的字符
for(var i=0;i<codeLength;i++)
{
var charIndex = Math.floor(Math.random()*36);
code +=selectChar[charIndex];
}
if(checkCode)
{
checkCode.value = code;
}
}
//用户名验证
function usernameOnfocus(){
var username = $("username");
username.style.border = "1px solid #ffbf00";
}
function usernameOnblur(obj){
var username = $("username");
var usernameId = $("usernameId");
username.style.border = "1px solid #cfcfcf";
if("" == obj.value){
usernameId.innerHTML="用户名不能为空";
usernameId.style.backgroundImage="url(images/err.jpg)";
usernameId.style.backgroundRepeat="no-repeat";
usernameId.style.backgroundPosition="15px 9px";
usernameId.style.paddingLeft="30px";
usernameId.style.color="#ff6600";
return false;
}
var regUser = /^[a-zA-Z][a-zA-Z0-9._-]{3,17}$/;
if(regUser.test(obj.value)==false){
usernameId.innerHTML="只能以字母开关，后面可以使用数字减号点等符号，且长度为4-18";
usernameId.style.backgroundImage="url(images/err.jpg)";
usernameId.style.backgroundRepeat="no-repeat";
usernameId.style.backgroundPosition="15px 9px";
usernameId.style.paddingLeft="30px";
usernameId.style.color="#ff6600";
return false;
}
var username2 = null;
var xmlHttp = new XMLHttpRequest();
var url = "ajaxUser?username="+ escape(username.value);
xmlHttp.open("POST", url);//设置一个请求
xmlHttp.onreadystatechange = function() { //设置请求完成之后处理的回调函数
if (xmlHttp.readyState == 4) {//数据返回完毕
if (xmlHttp.status == 200) {//HTTP操作正常
var text = xmlHttp.responseText;//接收返回的内容
if(text != null){
usernameId.innerHTML = xmlHttp.responseText;
usernameId.style.backgroundImage="url(images/err.jpg)";
usernameId.style.backgroundRepeat="no-repeat";
usernameId.style.backgroundPosition="15px 9px";
usernameId.style.paddingLeft="30px";
usernameId.style.color="#ff6600";
}
}
}
};
xmlHttp.send(null);//发送请求，不传递任何参数
usernameId.innerHTML="";
usernameId.style.backgroundImage="none";
return true;
}
//密码验证
function passwordOnfocus(){
var password = $("password");
password.style.border = "1px solid #ffbf00";
}
function passwordOnblur(obj){
var password = $("password");
var passwordId = $("passwordId");
password.style.border = "1px solid #cfcfcf";
if("" == obj.value){
passwordId.innerHTML="密码不能为空";
passwordId.style.backgroundImage="url(images/err.jpg)";
passwordId.style.backgroundRepeat="no-repeat";
passwordId.style.backgroundPosition="15px 9px";
passwordId.style.paddingLeft="30px";
passwordId.style.color="#ff6600";
return false;
}
var regPwd = /^[a-zA-Z0-9]{6,16}$/;
if(regPwd.test(obj.value)==false){
passwordId.innerHTML="密码由英文字母和数字组成的6-16位字符";
passwordId.style.backgroundImage="url(images/err.jpg)";
passwordId.style.backgroundRepeat="no-repeat";
passwordId.style.backgroundPosition="15px 9px";
passwordId.style.paddingLeft="30px";
passwordId.style.color="#ff6600";
return false;
}
passwordId.innerHTML="";
passwordId.style.backgroundImage="none";
return true;
}
//确认密码
function password2Onfocus(){
var password2 = $("password2");
password2.style.border = "1px solid #ffbf00";
}
function password2Onblur(obj){
var password2 = $("password2");
var password2Id = $("password2Id");
password2.style.border = "1px solid #cfcfcf";
if("" == obj.value){
password2Id.innerHTML="确认密码不能为空";
password2Id.style.backgroundImage="url(images/err.jpg)";
password2Id.style.backgroundRepeat="no-repeat";
password2Id.style.backgroundPosition="15px 9px";
password2Id.style.paddingLeft="30px";
password2Id.style.color="#ff6600";
return false;
}
if(obj.value != $("password").value){
password2Id.innerHTML="两次输入的密码不一致，请重新输入";
password2Id.style.backgroundImage="url(images/err.jpg)";
password2Id.style.backgroundRepeat="no-repeat";
password2Id.style.backgroundPosition="15px 9px";
password2Id.style.paddingLeft="30px";
password2Id.style.color="#ff6600";
return false;
}
password2Id.innerHTML="";
password2Id.style.backgroundImage="none";
return true;
}
//验证码
function codeOnfocus(){
var code = $("code");
code.style.border = "1px solid #ffbf00";
}
function codeOnblur(obj){
var code = $("code");
var codeId = $("codeId");
code.style.border = "1px solid #cfcfcf";
if("" == obj.value){
codeId.innerHTML="验证码不能为空";
codeId.style.backgroundImage="url(images/err.jpg)";
codeId.style.backgroundRepeat="no-repeat";
codeId.style.backgroundPosition="15px 9px";
codeId.style.paddingLeft="30px";
codeId.style.color="#ff6600";
return false;
}
if(obj.value != $("createCode").value){
codeId.innerHTML="验证码不正确";
codeId.style.backgroundImage="url(images/err.jpg)";
codeId.style.backgroundRepeat="no-repeat";
codeId.style.backgroundPosition="15px 9px";
codeId.style.paddingLeft="30px";
codeId.style.color="#ff6600";
return false;
}
codeId.innerHTML="";
codeId.style.backgroundImage="none";
return true;
}
//提交表单
function check(){
var username = usernameOnblur($("username"));
var password = passwordOnblur($("password"));
var password2 = password2Onblur($("password2"));
var code = codeOnblur($("code"));
if(username && password && password2 && code){
return true;
}
return false;
}
效果图：
1877
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
