目录
传智书城注册页面设计
实现步骤
1.创建register.html注册页面
在client文件夹中创建注册页面register.html，其中，注册页面引用的CSS样式文件和JS脚本文件代码如下所示。
<link rel="stylesheet" href="css/main.css" type="text/css" /><script type="text/javascript" src="js/form.js"></script>
实现注册功能的主要代码 register.html
<!-- 3.网上书城用户注册 start -->
<div id="divcontent" align="center">
<form action="registersuccess.html" method="post" onsubmit="return checkForm();">
<table width="850px" 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 style="width: 40%">
<input type="text" class="textinput" id="email" name="email" onkeyup="checkEmail();"/>
</td>
<td colspan="2"><span id="emailMsg"></span><font color="#999999">请输入有效的邮箱地址</font></td>
</tr>
<tr>
<td style="text-align: right">会员名：</td>
<td><input type="text" class="textinput" id="username" name="username" onkeyup="checkUsername();"/>
</td>
<td colspan="2"><span id="usernameMsg"></span><font color="#999999">字母数字下划线1到10位, 不能是数字开头</font></td>
</tr>
<tr>
<td style="text-align: right">密码：</td>
<td><input type="password" class="textinput" id="password" name="password" onkeyup="checkPassword();"/></td>
<td><span id="passwordMsg"></span><font color="#999999">密码请设置6-16位字符</font></td>
</tr>
<tr>
<td style="text-align: right">重复密码：</td>
<td>
<input type="password" class="textinput" id="repassword" name="repassword" onkeyup="checkConfirm();"/>
</td>
<td><span id="confirmMsg"></span> </td>
</tr>
<tr>
<td style="text-align: right">性别：</td>
<td colspan="2">
<input type="radio" name="gender" value="男" checked="checked" /> 男
<input type="radio" name="gender" value="女" /> 女
</td>
<td> </td>
</tr>
<tr>
<td style="text-align: right">联系电话：</td>
<td colspan="2">
<input type="text" class="textinput"
style="width: 350px" name="telephone" />
</td>
<td> </td>
</tr>
<tr>
<td style="text-align: right">个人介绍：</td>
<td colspan="2">
<textarea class="textarea" name="introduce"></textarea>
</td>
<td> </td>
</tr>
</table>
<table width="70%" border="0" cellspacing="0">
<tr>
<td style="padding-top: 20px; text-align: center">
<input type="image" src="images/signup.gif" name="submit" border="0"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</div>
当页面信息全部填写完成并通过校验后，单击“同意并提交”按钮后，会提交到<form>标签中action属性指定的registersuccess.html页面，该页面用于表示用户注册成功。其页面主要代码如下所示。
2.创建form.js文件，实现表单校验功能
//1.声明变量
var emailObj;
var usernameObj;
var passwordObj;
var confirmObj;
var emailMsg;
var usernameMsg;
var passwordMsg;
var confirmMsg;
window.onload = function() { // 页面加载之后, 获取页面中的对象
emailObj = document.getElementById("email");
usernameObj = document.getElementById("username");
passwordObj = document.getElementById("password");
confirmObj = document.getElementById("repassword");
emailMsg = document.getElementById("emailMsg");
usernameMsg = document.getElementById("usernameMsg");
passwordMsg = document.getElementById("passwordMsg");
confirmMsg = document.getElementById("confirmMsg");
};
function checkForm() { // 验证整个表单
var bEmail = checkEmail();
var bUsername = checkUsername();
var bPassword = checkPassword();
var bConfirm = checkConfirm();
return bUsername && bPassword && bConfirm && bEmail ; // return false后, 事件将被取消
}
function checkEmail() { // 验证邮箱
var regex = /^[\w-]+@([\w-]+\.)+[a-zA-Z]{2,4}$/;
var value =emailObj.value;
var msg = "";
if (!value)
msg = "邮箱必须填写：";
else if (!regex.test(value))
msg = "邮箱格式不合法：";
emailMsg.innerHTML = msg;
emailObj.parentNode.parentNode.style.color = msg == "" ? "black" : "red";
return msg == "";
}
function checkUsername() { // 验证用户名
var regex = /^[a-zA-Z_]\w{0,9}$/; // 字母数字下划线1到10位, 不能是数字开头
var value = usernameObj.value;// 获取usernameObj中的文本
var msg = ""; // 最后的提示消息, 默认为空
if (!value) // 如果用户名没填, 填了就是一个字符串可以当作true, 没填的话不论null或者""都是false
msg = "用户名必须填写："; // 改变提示消息
else if (!regex.test(value)) // 如果用户名不能匹配正则表达式规则
msg = "用户名不合法："; // 改变提示消息
usernameMsg.innerHTML = msg; // 将提示消息放入SPAN
usernameObj.parentNode.parentNode.style.color = msg == "" ? "black" : "red"; // 根据消息结果改变tr的颜色
return msg == ""; // 如果提示消息为空则代表没出错, 返回true
}
function checkPassword() { // 验证密码
var regex = /^.{6,16}$/; // 任意字符, 6到16位
var value = passwordObj.value;
var msg = "";
if (!value)
msg = "密码必须填写：";
else if (!regex.test(value))
msg = "密码不合法：";
passwordMsg.innerHTML = msg;
passwordObj.parentNode.parentNode.style.color = msg == "" ? "black" : "red";
return msg == "";
}
function checkConfirm() { // 验证确认密码
var passwordValue = passwordObj.value;
var confirmValue = confirmObj.value;
var msg = "";
if(!confirmValue){
msg = "确认密码必须填写";
}
else if (passwordValue != confirmValue){
msg = "密码必须保持一致";
}
confirmMsg.innerHTML = msg;
confirmObj.parentNode.parentNode.style.color = msg == "" ? "black" : "red";
return msg == "";
}
主界面设置
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>传智书城</title>
<link rel="stylesheet" href="css/main.css" type="text/css" />
<link rel="stylesheet" href="../css/layui.css"/>
<link type="text/css" href="css/autoplay.css"/>
<link rel="stylesheet" href="/static/build/layui.css" media="all"><!-- 轮播链接 -->
<!-- 导入首页轮播图css和js脚本 -->
<link type="text/css" href="css/autoplay.css" rel="stylesheet" />
<script type="text/javascript" src="js/autoplay.js"></script>
</head>
<body class="main">
<!-- 1.网上书城顶部 start -->
<div id="divhead">
<style>.left{float: left;}</style>
<ul class="layui-nav" style="text-align: right;"> <-- 小Tips：这里有没有发现，设置导航靠右对齐（或居中对齐）其实非常简单 -->
<span class="left">
<li class="layui-nav-item" >
<a href="" "><img src="images/logo.png" width="200" height="60" border="0" /></a>
</li>
</span style>
<li class="layui-nav-item" >
<a href=""><img src="images/cart.gif" width="26" height="23" style="margin-bottom:-4px" /> 购物车<span class="layui-badge">9</span></a>
</li>
<li class="layui-nav-item">
<a href="">帮助中心<span class="layui-badge">3</span></a>
</li>
<li class="layui-nav-item">
<a href="">我的帐户<span class="layui-badge-dot"></span></a>
</li>
<li class="layui-nav-item" >
<a href="register.html">新用户注册<span class="layui-badge-dot"></span></a>
</li>
</ul>
<!-- <table cellspacing="0" class="headtable">
<tr>
<td>
<a href="#"> <img src="images/logo.png" width="200" height="60" border="0" /> </a>
</td>
<td style="text-align:right">
<img src="images/cart.gif" width="26" height="23" style="margin-bottom:-4px" /> <a href="#">购物车</a>
| <a href="#">帮助中心</a>
| <a href="#">我的帐户</a>
| <a href="register.html">新用户注册</a>
</td>
</tr>
</table> -->
</div>
<!-- 网上书城顶部 end -->
<!--2. 网上书城菜单列表 start -->
<div id="divmenu">
<ul class="layui-nav" lay-filter="">
<li class="layui-nav-item"><a href="">文学</a></li>
<li class="layui-nav-item"><a href="">生活</a></li>
<li class="layui-nav-item"><a href="">计算机</a></li>
<li class="layui-nav-item"><a href="">外语</a></li>
<li class="layui-nav-item"><a href="">经管</a></li>
<li class="layui-nav-item"><a href="">励志</a></li>
<li class="layui-nav-item"><a href="">社科</a></li>
<li class="layui-nav-item"><a href="">学术</a></li>
<li class="layui-nav-item"><a href="">少儿</a></li>
<li class="layui-nav-item"><a href="">艺术</a></li>
<li class="layui-nav-item"><a href="">原版</a></li>
<li class="layui-nav-item"><a href="">科技</a></li>
<li class="layui-nav-item"><a href="">考试</a></li>
<li class="layui-nav-item"><a href="">生活百科</a></li>
<li class="layui-nav-item layui-this"><a href="">全部商品目录</a></li>
</ul>
<script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
var element = layui.element;
//…
});
</script>
</div>
<div id="divsearch" >
<form action="#" id="searchform">
<table width="100%" border="0" cellspacing="0" >
<tr>
<td style="text-align:right; padding-right:220px">
Search
<i class="layui-icon layui-icon-release"></i>
<!-- <button type="button" class="layui-btn">Search</button> -->
<input type="text" name="textfield" class="inputtable" id="textfield" value="请输入书名"
onmouseover="this.focus();"
onclick="my_click(this, 'textfield');"
onBlur="my_blur(this, 'textfield');"/>
<a href="#">
<button type="button" class="layui-btn" onclick="search()">搜索</button>
</a>
</td>
</tr>
</table>
</form>
</div>
<!-- 网上书城菜单列表 end -->
<!-- 3.网上书城首页轮播图 start -->
<div id="box_autoplay">
<div class="list">
<div class="layui-carousel" id="test1">
<div carousel-item>
<div><img src="ad/index_ad1.jpg" width="900" height="335" /></div>
<div><img src="ad/index_ad2.jpg" width="900" height="335" /></div>
<div><img src="ad/index_ad3.jpg" width="900" height="335" /></div>
<div><img src="ad/index_ad4.jpg" width="900" height="335" /></div>
<div><img src="ad/index_ad5.jpg" width="900" height="335" /></div>
</div>
</div>
<!-- 条目中可以是任意内容，如：<img src=""> -->
<script src="../layui.js"></script>
<script>
layui.use('carousel', function(){
var carousel = layui.carousel;
//建造实例
carousel.render({
elem: '#test1'
,width: '100%' //设置容器宽度
,arrow: 'always' //始终显示箭头
//,anim: 'updown' //切换动画方式
});
});
</script>
<!-- <ul>
<li><img src="ad/index_ad1.jpg" width="900" height="335" /></li>
<li><img src="ad/index_ad2.jpg" width="900" height="335" /></li>
<li><img src="ad/index_ad3.jpg" width="900" height="335" /></li>
<li><img src="ad/index_ad4.jpg" width="900" height="335" /></li>
<li><img src="ad/index_ad5.jpg" width="900" height="335" /></li>
</ul> -->
</div>
</div>
<!-- 网上书城首页轮播图 end -->
<!--4. 公告板和本周热卖 start -->
<div id="divcontent">
<table width="900px" border="0" cellspacing="0">
<tr>
<td width="497">
<img src="images/billboard.gif" width="497" height="38" />
<table cellspacing="0" class="ctl">
<tr>
<td width="485" height="29">
尊敬的网上书城用户， <br />
为了让大家有更好的购物体验，3月25日起，当日达业务关小黑屋回炉升级！<br />具体开放时间请留意公告，感谢大家的支持与理解，祝大家购物愉快！<br />
3月23日<br />
传智播客 网上书城系统管理部<br />
</td>
</tr>
</table>
</td>
<td style="padding:5px 15px 10px 40px">
<table width="100%" border="0" cellspacing="0">
<tr>
<td>
<img src="images/hottitle.gif" width="126" height="29" />
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0">
<tr>
<td style="width:80; text-align:center">
<a href="#">
<img src="bookcover/105.jpg" width="102" height="130" border="0" />
</a>
<br />
</td>
<td style="width:80; text-align:center">
<a href="#">
<img src="bookcover/106.jpg" width="102" height="130" border="0" />
</a>
<br />
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!-- 公告板和本周热卖 end -->
<!--5. 网上书城底部 start -->
<div id="divfoot">
<table width="100%" border="0" cellspacing="0" >
<tr>
<td rowspan="2" style="width:10%">
<img src="images/logo.png" width="195" height="50"
style="margin-left:175px" />
</td>
<td style="padding-top:5px; padding-left:50px">
<a href="#">
<font color="#747556"><b>CONTACT US</b></font>
</a>
</td>
</tr>
<tr>
<td style="padding-left:50px">
<font color="#CCCCCC">
<b>COPYRIGHT 2015 © BookStore All Rights RESERVED.</b>
</font>
</td>
</tr>
</table>
</div>
<!-- 网上书城底部 end -->
</body>
</html>自动播放页面
//获取ID
var $ = function (id) {return typeof id === "string" ? document.getElementById(id) : id;};
//获取tagName
var $$ = function (tagName, oParent) {return (oParent || document).getElementsByTagName(tagName);};
//自动播放对象
var AutoPlay = function (id) {this.initialize(id);};
AutoPlay.prototype = {
initialize: function (id)
{
var oThis = this;
this.oBox = $(id);
this.oUl = $$("ul", this.oBox)[0];
this.aImg = $$("img", this.oBox);
this.timer = null;
this.autoTimer = null;
this.iNow = 0;
this.creatBtn();
this.aBtn = $$("li", this.oCount);
this.toggle();
this.autoTimer = setInterval(function ()
{
oThis.next();
}, 3000);
this.oBox.onmouseover = function ()
{
clearInterval(oThis.autoTimer);
};
this.oBox.onmouseout = function ()
{
oThis.autoTimer = setInterval(function ()
{
oThis.next();
}, 3000);
};
for (var i = 0; i < this.aBtn.length; i++)
{
this.aBtn[i].index = i;
this.aBtn[i].onmouseover = function ()
{
oThis.iNow = this.index;
oThis.toggle();
};
}
},
creatBtn: function ()
{
this.oCount = document.createElement("ul");
this.oFrag = document.createDocumentFragment();
this.oCount.className = "count";
for (var i = 0; i < this.aImg.length; i++)
{
var oLi = document.createElement("li");
oLi.innerHTML = i + 1;
this.oFrag.appendChild(oLi);
}
this.oCount.appendChild(this.oFrag);
this.oBox.appendChild(this.oCount);
},
toggle: function ()
{
for (var i = 0; i < this.aBtn.length; i++) this.aBtn[i].className = "";
this.aBtn[this.iNow].className = "current";
this.doMove(-(this.iNow * this.aImg[0].offsetHeight));
},
next: function ()
{
this.iNow++;
this.iNow == this.aBtn.length && (this.iNow = 0);
this.toggle();
},
doMove: function (iTarget)
{
var oThis = this;
clearInterval(oThis.timer);
oThis.timer = setInterval(function ()
{
var iSpeed = (iTarget - oThis.oUl.offsetTop) / 5;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
oThis.oUl.offsetTop == iTarget ? clearInterval(oThis.timer) : (oThis.oUl.style.top = oThis.oUl.offsetTop + iSpeed + "px");
}, 30);
}
};
window.onload = function ()
{
new AutoPlay("box_autoplay");
}; 
var receiverAddressObj;
var receiverNameObj;
var receiverPhoneObj;
window.onload = function() { // 页面加载之后, 获取页面中的对象
receiverAddressObj = document.getElementById("receiverAddress");
receiverNameObj = document.getElementById("receiverName");
receiverPhoneObj = document.getElementById("receiverPhone");
};
function checkOnSubmit() { // 验证整个表单
var receiverAddress = checkReceiverAddress();
var receiverName = checkReceiverName();
var receiverPhone = checkReceiverPhone();
if(receiverAddress && receiverName && receiverPhone){
document.getElementById("orderForm").submit();
}else{
return "";
}
}
function checkReceiverAddress() { // 验证收获地址
var value =receiverAddressObj.value;
var msg = "";
if (!value)
msg = "收获地址必须填写";
receiverAddressMsg.innerHTML = msg;
receiverAddressObj.parentNode.parentNode.style.color = msg == "" ? "black" : "red";
return msg == "";
}
function checkReceiverName() { // 验证收货人
var value =receiverNameObj.value;
var msg = "";
if (!value)
msg = "收获人必须填写";
receiverNameMsg.innerHTML = msg;
receiverNameObj.parentNode.parentNode.style.color = msg == "" ? "black" : "red";
return msg == "";
}
function checkReceiverPhone() { // 验证联系方式
var regex =/^1[3,5,8]\d{9}$/; //以13、15、18开头的手机号
var value =receiverPhoneObj.value;
var msg = "";
if (!value)
msg = "联系方式必须填写";
else if (!regex.test(value))
msg = "手机号码不合法：";
receiverPhoneMsg.innerHTML = msg;
receiverPhoneObj.parentNode.parentNode.style.color = msg == "" ? "black" : "red";
return msg == "";
}
var interval;
window.onload = function() {
interval = window.setInterval("changeSecond()", 1000);
};
function changeSecond() {
var second = document.getElementById("second");
var svalue = second.innerHTML;
svalue = svalue - 1;
if (svalue == 0) {
window.clearInterval(interval);
// 下列两行代码用于获取项目名，例如：bookstore
var pathName = window.location.pathname.substring(1);
var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
// 拼接访问路径名，例如：http://localhost:8080/bookstore/index.jsp
location.href = window.location.protocol + '//' + window.location.host + '/'+ webName + '/index.jsp';
return;
}
second.innerHTML = svalue;
}