<html>
<title>bookStore商城-商品信息展示</title>
<meta http-equiv="Content-Type" content="text/html;charset=GB2312">
<style type="text/css">
.main{
margin:0px 0px 30px 0px;
background-color:#ffffff;
font-size:12px;
color:#000000;
text-align:center;
vertical-align:top;
line-height:150%;
font-family: Arial, Helvetica, sans-serif;
}
/*设置a标签 字体12px 颜色 #0066FF*/
a {
font-size: 12px;
color: #0066FF;
}
/*设置未访问的超连接无下划线*/
a:link {
text-decoration: none;
}
/*设置访问后的连接颜色为#0066ff 也无下划线*/
a:visited {
text-decoration: none;
color: #0066FF;
}
/*设置鼠标移到超连接上无下划线颜色为#990099*/
a:hover {
text-decoration: none;
color: #990099; /*颜色变换*/
}
/*设置选定的超连接无下划线，颜色为#0066ff*/
a:active {
text-decoration: none;
color: #0066FF;
}
/*设置所有td标签*/
td{
text-align:left;
vertical-align:top;
font-size:12px;
}
/*设置所有的hr标签*/
hr{
/*颜色*/
color:#cccccc;
/*高度*/
height:1px;
/*上外边距5px*/
margin-top:5px;
/*下外边距5px*/
margin-bottom:5px;
/*分隔线如果超出框架部分隐藏*/
overflow:hidden;
}
/*设置h1*/
h1{
font-size:14px;
color:#000000;
margin-bottom:5px;
font-weight:bold;
display:inline;
text-align:left;
}
#head{
/*设置head这个div宽度为100%*/
width:100%;
}
.headtab{
width:100%;
}
.headta td{
/*设置td内边距上10px 右50px 下25px 左135px*/
padding:10px 50px 25px 135px;
}
#menu{
width:100%;
background-color:#1c3f09;/*设置背景色*/
border-top-width:4px;/*设置上边框宽度4px*/
border-top-style:solid; /*设置上边框样式 实线*/
border-top-color:#82b211; /*设置上边框的颜色 #82b211*/
text-align:center;
font-size:14px;
padding:10px 0px 10px 0px;
}
#menu td{
text-align:center;
}
#menu a{
font-size:14px;
color:#ffffff; /*超连接文字颜色*/
font-weight:bold; /*超连接字体加粗*/
padding:10px 10px 10px 10px; /*超连接内边距*/
}
#menu a:link {
text-decoration: none;
font-weight: bold;
}
#menu a:visited {
text-decoration: none;
color: #FFFFFF;
font-weight: bold;
}
#menu a:hover {
text-decoration: none;
color: #999999; /*颜色变换*/
font-weight: bold;
}
#menu a:active {
text-decoration: none;
color: #FFFFFF;
font-weight: bold;
}
#search{
width:100%;
text-align:center;
color:#ffffff;
font-weight:bold;
padding:5px 0px 5px 0px;
background-color:#b6b684;
}
.inputtxt{
width:130px;
height:18px;
border:1px solid #999999;
}
/*注册页面content部分整体设计*/
#content{
width:900px;
background-color:#fcfdef;
border:1px solid #eeeddb;
margin-right:auto;
margin-left:auto;
}
/*设置边框*/
.upline{
border-bottom-width:1px;
border-bottom-style:dashed;
border-bottom-color:#b0bec7;
padding-top:5px;
padding-bottom:5px;
margin:20px;
}
/*设置文本框样式*/
.txtinput{
margin-left:10px;
font-size:12px;
width:150px;
height:18px;
border:1px solid #a4b4bd;
}
/*设置文本域样式*/
.txtarea{
margin-left:10px;
font-size:12px;
width:350px;
height:75px;
border:1px solid #a4b4bd;
}
#foot{
width:100%;
background-color:#efeedc;
margin-top:15px;
}
</style>
</head>
<body class="main">
<!--
head是由一行两列table完成展示
-->
<div id="head">
<table id="headtab">
<tr>
<td align="left">
<img src="images/logo.png"/>
</td>
<td align="right">
<img src="images/cart.gif"/>
<a>购物车</a>|
<a>帮助中心</a>|
<a>我的账户</a>|
<a>新用户注册</a>|
</td>
</tr>
</table>
</div>
<!--
menu其中就是很多超连接
一行一列的表
-->
<div id="menu">
<table width="100%">
<tr>
<td>
<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="#">原版</a>
<a href="#">科技</a>
<a href="#">考试</a>
<a href="#">生活百科</a>
<a href="#" style="color:yellow">全部商品目录</a>
</td>
</tr>
</table>
</div>
<!--
search是由一行一列table完成
-->
<div id="search">
<table width="100%">
<tr>
<td style="text-align:right;padding-right:220px">
Search
<input type="text" class="inputtxt"/>
<input type="image" src="images/serchbutton.gif" style="margin-top:8px"/>
</td>
</tr>
</table>
</div>
<!--
注册表单
-->
<div id="content">
<form action="#" method="get" onsubmit="return checkForm()">
<table width="900px" border="0" cellspacing="0">
<tr>
<td style="padding:30px">
<h1>新会员注册</h1>
<table width="70%" border="0" cellspacing="2" class="upline">
<tr>
<td style="text-align:right;width:20%">会员邮箱</td>
<td><input type="text" name="email" class="txtinput" id="email"></td>
<td>
<font color="red" id="email_msg"></font>
</td>
</tr>
<tr>
<td style="text-align:right;width:20%">会员名</td>
<td><input type="text" name="username" class="txtinput" id="username"></td>
<td>
<font color="red" id="username_msg"></font>
</td>
</tr>
<tr>
<td style="text-align:right;width:20%">密码</td>
<td><input type="password" name="password" class="txtinput" id="password"></td>
<td>
<font color="red" id="password_msg"></font>
</td>
<tr>
<td style="text-align:right;width:20%">重复密码</td>
<td><input type="password" name="repassword" class="txtinput" id="repassword"></td>
<td>
<font color="red" id="repassword_msg"></font>
</td>
</tr>
<tr>
<td style="text-align:right;width:20%">性别</td>
<td colspan="2">
<input type="radio" name="sex" value="男" checked>男
<input type="radio" name="sex" value="女" >女
</td>
<tr>
<td style="text-align:right;width:20%">联系电话</td>
<td colspan="2">
<input type="text" name="telephone" class="txtinput" style="width:350px;">
</td>
</tr>
<tr>
<td style="text-align:right;width:20%">个人介绍</td>
<td colspan="2">
<textarea name="introduce" class="txtarea"></textarea>
</td>
</tr>
</table>
<h1>注册校验</h1>
<table width="70%" border="0" cellspacing="2" class="upline">
<tr>
<td style="text-align:right;width:20%">输入校验码</td>
<td><input type="text" name="checkcode" class="txtinput"></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="2">
<img src="" class="txtinput" style="height:30px;" alt="验证码">
<a href="#">看不清换一张</a>
</td>
</tr>
</table>
<table width="70%" border="0" cellspacing="2">
<tr>
<td style="text-align:center">
<input type="image" src="images/signup.gif" >
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</div>
<!--
foot是由两行两列的table完成。
但是第一个td合并了2行
-->
<div id="foot">
<table bgcolor="#efeedc" width="100%" align="center">
<tr>
<td rowspan="2" style="width:10%">
<img src="images/logo.png" width="195" height="50" style="margin-left:175px;">
</td>
<td style="padding-left:50px;padding-top:5px;">
<a><font color="#747556">CONTACT US</font></a>
</td>
</tr>
<tr>
<td style="padding-left:50px;">
<font color="#747556">copyright 2008©BookStore All Rights RESERVED</font>
</td>
</tr>
</table>
</div>
</body>
<script>
function checkForm(){
var flag=true;
//1.获取要验证的内容
var email=document.getElementById("email");
var username=document.getElementById("username");
var password=document.getElementById("password");
var repassword=document.getElementById("repassword");
var email_msg=document.getElementById("email_msg");
var username_msg=document.getElementById("username_msg");
var password_msg=document.getElementById("password_msg");
var repassword_msg=document.getElementById("repassword_msg");
//2.校验
//2.1检验邮箱 先判断是否为空
// 若为空，flag=false,提示信息 邮箱不能为空
// 若不为空，继续判断是否符合格式
// 若不满足格式，flag=false,提示信息 格式不正确
// 若满足格式：提示信息置空
if(isNull(email.value)){
flag=false;
email_msg.innerHTML="邮箱不能为空";
}else if(!checkEmail(email.value)){
flag=false;
email_msg.innerHTML="邮箱格式不正确";
}else{
email_msg.innerHTML="";
}
//3.判断用户名是否为空，为空返回false,不为空再判断用户名是否至少6位
if(isNull(username.value)){
username_msg.innerHTML="用户名不能为空";
flag=false;
}else if(!checkUsername(username.value)){
username_msg.innerHTML="用户名至少6位";
flag=false;
}else{
username_msg.innerHTML="";
}
//4.判断密码是否为空
if(isNull(password.value)){
password_msg.innerHTML='密码不能为空';
flag=false;
}else if(!checkPwdAndUsername(password.value)){
password_msg.innerHTML='密码至少6位';
flag=false;
}else{
password_msg.innerHTML="";
}
//判断两次密码是否相同
if(password.value!=repassword.value){
repassword_msg.innerHTML="两次密码不一致";
flag=false;
}else{
repassword_msg.innerHTML="";
}
return flag;
}
//判断是否为空,为空返回true,否则返回false
function isNull(value){
return /^\s*$/.test(value);
}
//是否符合邮箱格式,符合返回true,否则返回false
function checkEmail(value){
//12345@qq.com
//123455@sohu.com.cn
return /^\w{5,}@\w+(\.\w+)+$/.test(value);
}
//是否符合用户名格式，符合返回true,否则返回false
function checkUsername(user){
return /^\w{6,12}$/.test(user);
}
//判断密码是否符合格式
function checkPwdAndUsername(pwd){
return /^\w{6,}$/.test(pwd);
}
</script>
</html>
浙公网安备 33010602011771号