<!DOCTYPE html>
<html>
<head>
<title>register.html</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.2.0.js"></script>
<link rel="stylesheet" href="js/register.css" type="text/css"></link>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
//检查用户名
function checkname(num){
var uname=/^[0-9|a-zA-Z|\w]\w{3,15}[0-9|a-zA-Z|\w]$/ig;
var username=$("#userName").val();
if(username.length<4){
$("#userNameId").addClass("error_prompt").html("用户名长度小于4");
num=1;
}
else if(username.length>18){
$("#userNameId").addClass("error_prompt").html("用户名长度大于18");
num=1;
}else if(uname){
$("#userNameId").addClass("ok_prompt").html("用户名正确");
}
return num;
};
//检查邮箱
function check(num){
var mail=$("#email").val();
if(mail.length<1){
$("#emailId").addClass("error_prompt").html("邮箱不能为空");
num=1;
}
else if(mail.indexOf("@")==-1){
$("#emailId").addClass("error_prompt").html("Email格式不正确\n必须包含@");
num=1;
}
else if(mail.indexOf(".")==-1){
$("#emailId").addClass("error_prompt").html("Email格式不正确\n必须包含.");
num=1;
}else{
$("#emailId").addClass("ok_prompt").html("Email输入正确");
}
return num;
}
//检查密码
function checkpwd(num){
var pwd=$("#pwd").val();
if(pwd.length<6){
$("#pwdId").addClass("error_prompt").html("密码不能小于6位");
num=1;
}else if(pwd.length>16){
$("#pwdId").addClass("error_prompt").html("密码不能大于16位");
num=1;
} else{
$("#pwdId").addClass("ok_prompt").html("密码输入正确");
}
return num;
}
//重复密码
function checkrepwd(num){
var repwd=$("#repwd").val();
if(repwd.length<1){
$("#repwdId").addClass("error_prompt").html("重复密码不能为空");
num=1;
} else{
$("#repwdId").addClass("ok_prompt").html("重复密码输入正确");
}
return num;
}
//检查昵称
function checksname(num){
var sname=(/[\u4e00-\u9fa5]/g,"xx").length;
var sername=$("#nickName").val();
if(sername.length<4){
$("#nickNameId").addClass("error_prompt").html("用户名长度小于4个字符");
num=1;
}
else if(sername.length>18){
$("#nickNameId").addClass("error_prompt").html("用户名长度大于18个字符");
num=1;
}else if(sname){
$("#nickNameId").addClass("ok_prompt").html("昵称正确");
}
return num;
};
//检查关联手机号
function checkphone(num){
var phones=/^1[3|5|8]\d{9}$/;
var phone=$("#tel").val();
if(phone.length==""){
$("#telId").addClass("error_prompt").html("关联手机号不能为空,请输入手机号");
num=1;
}else if(phones){
$("#telId").addClass("ok_prompt").html("手机号正确");
}else{
$("#telId").addClass("error_prompt").html("关联手机号有其他错误");
num=1;
}
return num;
}
$(function(){
$("[id=userName]").blur(function(){
checkname(0);
});
$("[id=email]").blur(function(){
check(0);
});
$("[id=tel]").blur(function(){
checkphone(0);
});
$("[id=nickName]").blur(function(){
checksname(0);
});
$("[id=repwd]").blur(function(){
checkrepwd(0);
});
$("[id=pwd]").blur(function(){
checkpwd(0);
});
$("[type=text]").focus(function(){
$(this).addClass("import_prompt");
});
$("[type=text]").blur(function(){
$(this).removeClass("import_prompt");
});
$(".inputs").focus(function(){
$(this).addClass("import_prompt");
});
$(".inputs").blur(function(){
$(this).removeClass("import_prompt");
});
$("#myform").submit(function(){
var flagemail=check(0);
var flagpwd= checkpwd(0);
var flagrepwd= checkrepwd(0);
var flagname=checkname(0);
var flagsname=checksname(0);
var flagphone=checkphone(0);
var sum=flagemail+flagpwd+flagrepwd+flagname+flagphone+flagsname;
if(sum>0){
return false;
}else{
return true;
}
});
});
</script>
</head>
<body>
<div id="header"><img src="images/register_logo.gif" alt="logo"/></div>
<div id="main">
<form action="MyCar.html" method="post" id="myform" name="myform">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="bg bg_top_left"></td>
<td class="bg_top"></td>
<td class="bg bg_top_right"></td>
</tr>
<tr>
<td class="bg_left"></td>
<td class="content">
<form id="registerForm" action="" method="post" name="myform">
<dl>
<dt>通行证用户名:</dt>
<dd><input type="text" id="userName" class="inputs userWidth"/> @163.com</dd>
<div id="userNameId"></div>
</dl>
<dl>
<dt>登录密码:</dt>
<dd><input type="password" id="pwd" class="inputs"/></dd>
<div id="pwdId"></div>
</dl>
<dl>
<dt>重复登录密码:</dt>
<dd><input type="password" id="repwd" class="inputs"/></dd>
<div id="repwdId"></div>
</dl>
<dl>
<dt>性别:</dt>
<dd><input name="sex" type="radio" value="" checked="checked"/>男 <input name="sex" type="radio" value="" />女 </dd>
</dl>
<dl>
<dt>真实姓名:</dt>
<dd><input type="text" id="realName" class="inputs" /></dd>
</dl>
<dl>
<dt>昵称:</dt>
<dd><input type="text" id="nickName" class="inputs"/></dd>
<div id="nickNameId"></div>
</dl>
<dl>
<dt>关联手机号:</dt>
<dd><input type="text" id="tel" class="inputs"/></dd>
<div id="telId"></div>
</dl>
<dl>
<dt>保密邮箱:</dt>
<dd><input type="text" id="email" class="inputs"/></dd>
<div id="emailId"></div>
</dl>
<dl>
<dt></dt>
<dd><input name=" " type="image" src="images/button.gif"/></dd>
</dl>
</form>
</td>
<td class="bg_right"></td>
</tr>
<tr>
<td class="bg bg_end_left"></td>
<td class="bg_end"></td>
<td class="bg bg_end_right"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>MyCar.html</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.2.0.js"></script>
<link rel="stylesheet" href="js/myCart.css" type="text/css"></link>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
window.onload = function() {
};
//全选-------------------------------------------------------------------------------------------
function check() {
//把所有参与选择的checkbox使用相同的name
var eles = document.getElementsByName("cartCheckBox");
var i = 0;
// 如果是全选状态,则取消所有的选择
if(isSelectAll() == true) {
for( i = 0; i < eles.length; i++) {
eles[i].checked = false;
}
//document.getElementById("all").checked = false;
} else {
// 否则选中每一个checkbox
for( i = 0; i < eles.length; i++) {
eles[i].checked = true;
}
}
}
// 判断当前是否为全选状态
function isSelectAll() {
var isSelected = true;
var eles = document.getElementsByName("cartCheckBox");
for(var i = 0; i < eles.length; i++) {
if(eles[i].checked != true) {
isSelected = false;
}
}
return isSelected;
}
// 选择任意一个非全选checkbox
function checkOne() {
if(isSelectAll()) {
document.getElementById("allCheckBox").checked = true;
} else {
document.getElementById("allCheckBox").checked = false;
}
}
//--------------------------------------------------------------------------------
//==========删除===========================================
$(function(){
$(".cart_td_8 a").click(function(){
$(this).parent().parent().prev("tr").remove();
$(this).parent().parent().remove();
productCount();
});
///删除所选---------------------------------
$("[alt=delete]").click(function(){
});
//-------删除--------------------------------------------------------------
//=================购物车加减============================
$(".num_input").next().click(function(){
var num=parseInt($(this).prev().val())+1;
$(this).prev().val(num);
productCount();
});
$(".num_input").prev().click(function(){
var num=parseInt($(this).next().val())-1;
$(this).next().val(num);
if(num==0){
alert("数量不能小于1");
$(this).next().val(1);
productCount();
}else{
$(this).next().val(num);
productCount();
}
});
// ========================购物车加减
//============计算总价与小计
function productCount(){
var $tr=$("#shopping").find("tr[id]");
var summer=0;
var integral=0;
$tr.each(function(i,dom){
var num=$(dom).children(".cart_td_6").find("input").val();//商品数量
var price=num*$(dom).children(".cart_td_5").text();//商品小计
$(dom).children(".cart_td_7").html(price);//显示商品小计
summer+=price;//总价
integral+=$(dom).children(".cart_td_4").text()*num;//积分
});
$("#total").text(summer);
$("#integral").text(integral);
}
productCount();
/* function changeNumber(dom,flag){
var $input=$(dom).parent().find("input");
var value=$input.val();
if(flag){
value++;
}else{
value--;
if(value<=0){
value=1;
alert("宝贝数量必须大于0");
}
}
$input.val(value);
productCount();
};
*/
//点击删除所选
$("#deleteAll").click(function(){
$("#shopping").find("tr[id]").each(function(i,e){
var $tr=$(e);
var checked=$tr.children(".cart_td_1").children().is(":checked");
if(checked){
$tr.prev().remove();
$tr.remove();
}
});
productCount();
});
});
</script>
</head>
<body>
<div id="header"><img src="images/taobao_logo.gif" alt="logo" /></div>
<div id="nav">您的位置:<a href="#">首页</a> > <a href="#">我的淘宝</a> > 我的购物车</div>
<div id="navlist">
<ul>
<li class="navlist_red_left"></li>
<li class="navlist_red">1. 查看购物车</li>
<li class="navlist_red_arrow"></li>
<li class="navlist_gray">2. 确认订单信息</li>
<li class="navlist_gray_arrow"></li>
<li class="navlist_gray">3. 付款到支付宝</li>
<li class="navlist_gray_arrow"></li>
<li class="navlist_gray">4. 确认收货</li>
<li class="navlist_gray_arrow"></li>
<li class="navlist_gray">5. 评价</li>
<li class="navlist_gray_right"></li>
</ul>
</div>
<div id="content">
<form action="" method="post" name="myform">
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="shopping">
<tr>
<td class="title_1"><input id="allCheckBox" type="checkbox" οnclick="check()" value=""/>全选</td>
<td class="title_2" colspan="2">店铺宝贝</td>
<td class="title_3">获积分</td>
<td class="title_4">单价(元)</td>
<td class="title_5">数量</td>
<td class="title_6">小计(元)</td>
<td class="title_7">操作</td>
</tr>
<tr>
<td colspan="8" class="line"></td>
</tr>
<tr>
<td colspan="8" class="shopInfo">店铺:<a href="#">纤巧百媚时尚鞋坊</a> 卖家:<a href="#">纤巧百媚</a> <img src="images/taobao_relation.jpg" alt="relation" /></td>
</tr>
<tr id="product1">
<td class="cart_td_1"><input name="cartCheckBox" οnclick="checkOne()" type="checkbox" value="product1"/></td>
<td class="cart_td_2"><img src="images/taobao_cart_01.jpg" alt="shopping"/></td>
<td class="cart_td_3"><a href="#">日韩流行风时尚美眉最爱独特米字拼图金属坡跟公主靴子黑色</a><br />
颜色:棕色 尺码:37<br />
保障:<img src="images/taobao_icon_01.jpg" alt="icon" /></td>
<td class="cart_td_4">5</td>
<td class="cart_td_5">138.00</td>
<td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" class="hand"/> <input id="num_1" type="text" value="1" class="num_input" readonly="readonly"/> <img src="images/taobao_adding.jpg" alt="add" class="hand"/></td>
<td class="cart_td_7"></td>
<td class="cart_td_8"><a href="javascript:void(0);">删除</a></td>
</tr>
<tr>
<td colspan="8" class="shopInfo">店铺:<a href="#">香港我的美丽日记</a> 卖家:<a href="#">lokemick2009</a> <img src="images/taobao_relation.jpg" alt="relation" /></td>
</tr>
<tr id="product2">
<td class="cart_td_1"><input name="cartCheckBox" type="checkbox" οnclick="checkOne()" value="product2" /></td>
<td class="cart_td_2"><img src="images/taobao_cart_02.jpg" alt="shopping"/></td>
<td class="cart_td_3"><a href="#">chanel/香奈尔/香奈尔炫亮魅力唇膏3.5g</a><br />
保障:<img src="images/taobao_icon_01.jpg" alt="icon" /> <img src="images/taobao_icon_02.jpg" alt="icon" /></td>
<td class="cart_td_4">12</td>
<td class="cart_td_5">265.00</td>
<td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" class="hand"/> <input id="num_2" type="text" value="1" class="num_input" readonly="readonly"/> <img src="images/taobao_adding.jpg" alt="add" class="hand"/></td>
<td class="cart_td_7"></td>
<td class="cart_td_8"><a href="javascript:void(0);">删除</a></td>
</tr>
<tr>
<td colspan="8" class="shopInfo">店铺:<a href="#">实体经营</a> 卖家:<a href="#">林颜店铺</a> <img src="images/taobao_relation.jpg" alt="relation" /></td>
</tr>
<tr id="product3">
<td class="cart_td_1"><input name="cartCheckBox" type="checkbox" οnclick="checkOne()" value="product3"/></td>
<td class="cart_td_2"><img src="images/taobao_cart_03.jpg" alt="shopping"/></td>
<td class="cart_td_3"><a href="#">蝶妆海?蓝清滢粉底液10#(象牙白)</a><br />
保障:<img src="images/taobao_icon_01.jpg" alt="icon" /> <img src="images/taobao_icon_02.jpg" alt="icon" /></td>
<td class="cart_td_4">3</td>
<td class="cart_td_5">85.00</td>
<td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" class="hand"/> <input id="num_3" type="text" value="1" class="num_input" readonly="readonly"/> <img src="images/taobao_adding.jpg" alt="add" class="hand"/></td>
<td class="cart_td_7"></td>
<td class="cart_td_8"><a href="javascript:void(0);">删除</a></td>
</tr>
<tr>
<td colspan="8" class="shopInfo">店铺:<a href="#">红豆豆的小屋</a> 卖家:<a href="#">taobao豆豆</a> <img src="images/taobao_relation.jpg" alt="relation" /></td>
</tr>
<tr id="product4">
<td class="cart_td_1"><input name="cartCheckBox" type="checkbox" οnclick="checkOne()" value="product4"/></td>
<td class="cart_td_2"><img src="images/taobao_cart_04.jpg" alt="shopping"/></td>
<td class="cart_td_3"><a href="#">相宜促销专供 大S推荐 最好用的LilyBell化妆棉</a><br />
保障:<img src="images/taobao_icon_01.jpg" alt="icon" /></td>
<td class="cart_td_4">12</td>
<td class="cart_td_5">12.00</td>
<td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" class="hand"/> <input id="num_4" type="text" value="2" class="num_input" readonly="readonly"/> <img src="images/taobao_adding.jpg" alt="add" class="hand"/></td>
<td class="cart_td_7"></td>
<td class="cart_td_8"><a href="javascript:void(0);">删除</a></td>
</tr>
<tr>
<td colspan="3"><a id="deleteAll" href="javascript:void(0);"><img src="images/taobao_del.jpg" alt="delete"/></a></td>
<td colspan="5" class="shopend">商品总价(不含运费):<label id="total" class="yellow"></label> 元<br />
可获积分 <label class="yellow" id="integral"></label> 点<br />
<input name=" " type="image" src="images/taobao_subtn.jpg" /></td>
</tr>
</table>
</form>
</div>
</body>
</html>