<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>第八章</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
//用户名判断
/* function yname(){
var yname=$("#userName").val();
if(yname.length==0)
{
$("#yname").html("名字不能为空");
return false;
}
return true;
}
$(function(){
$("#registerForm").submit(function(){
var flage= yname();
return flage;
});
});
*/
$(function($){
//验证方法
function validate($dom){
var flag=true;//用于判断
//改变属性 attr(名称,值)
var id= $dom.attr("id");
var v=$dom.val();
var errorInfo="";
switch(id){
case "userName":
var $userNameId=$("#userNameId");
var reg=/^[0-9a-zA-Z][0-9a-zA-Z_.-]{2,16}[0-9a-zA-Z]$/;
if(v==""){
$userNameId.removeClass().addClass("error_prompt");
$userNameId.html("通行证用户名不能为空，请输入通行证用户名");
flag=false;
}else if(reg.test(v)==false){
$userNameId.removeClass().addClass("error_prompt");
$userNameId.html("1、由字母、数字、下划线、点、减号组成<br/>2、只能以数字、字母开头或结尾，且长度为4-18");
flag=false;
}else{
$userNameId.removeClass().addClass("ok_prompt").html("通行证用户名输入正确");
}
break;
case "pwd":
var $pwdId=$("#pwdId");
if(v==""){
$pwdId.removeClass().addClass("error_prompt").html("密码不能为空，请输入密码");
flag=false;
}else if(v.length<6 || v.length>16){
$pwdId.removeClass().addClass("error_prompt").html("密码长度为6-16");
flag=false;
}else{
$pwdId.removeClass().addClass("ok_prompt").html("密码输入正确");
}
break;
case "repwd":
var pwd=$("#pwd").val();
var $repwdId=$("#repwdId");
if(v==""){
$repwdId.removeClass().addClass("error_prompt").html("重复密码不能为空，请重复输入密码");
flag=false;
}else if(v!=pwd){
$repwdId.removeClass().addClass("error_prompt").html("两次输入的密码不一致，请重新输入");
flag=false;
}else{
$repwdId.removeClass().addClass("ok_prompt").html("两次密码输入正确");
}
break;
case "nickName":
var $nickNameId=$("#nickNameId");
var reg = /^([\u4e00-\u9fa5]|\w|[@!#$%&*])+$/; // 匹配昵称
var chinaReg = /[\u4e00-\u9fa5]/g; //匹配中文字符
var len = v.replace(chinaReg, "ab").length; //把中文字符转换为两个字母，以计算字符长度
if(v==""){
$nickNameId.removeClass().addClass("error_prompt").html("昵称不能为空，请输入昵称");
flag=false;
}else if(reg.test(v)==false){
$nickNameId.removeClass().addClass("error_prompt").html("只能由汉字、字母、数字、下划线以及@!#$%&*特殊字符组成");
flag=false;
} else if (len < 4 || len > 20) {
$nickNameId.removeClass().addClass("error_prompt").html("1、长度为4－20个字符<br/>2、一个汉字占两个字符");
flag=false;
}else{
$nickNameId.removeClass().addClass("ok_prompt").html("昵称输入正确");
}
break;
case "tel":
var $telId=$("#telId");
var reg=/^(13|15|18)\d{9}$/;
if(v==""){
$telId.removeClass().addClass("error_prompt").html("关联手机号码不能为空，请输入关联手机号码");
flag=false;
}else if(reg.test(v)==false){
$telId.removeClass().addClass("error_prompt").html("关联手机号码输入不正确，请重新输入");
flag=false;
}else{
$telId.removeClass().addClass("ok_prompt").html("关联手机号码输入正确");
}
break;
case "email":
var $emailId=$("#emailId");
var reg=/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
if(v==""){
$emailId.removeClass().addClass("error_prompt").html("保密邮箱不能为空，请输入保密邮箱");
flag=false;
}else if(reg.test(v)==false){
$emailId.removeClass().addClass("error_prompt").html("保密邮箱格式不正确，请重新输入");
flag=false;
}else{
$emailId.removeClass().addClass("ok_prompt").html("保密邮箱输入正确");
}
break;
default:
break;
}
return flag;
}
//提交表单
$("#registerForm").submit(function(){
var flag=true;
$(this).find("input[id]").each(function(i,e){
if(!validate($(e))){
flag=false;
}
});
return false;
});
//绑定用户名事件
$("#userName").bind({
focus:function(){
$("#userNameId").removeClass().addClass("import_prompt").html("1、由字母、数字、下划线、点、减号组成<br/>2、只能以数字、字母开头或结尾，且长度为4-18");
},
blur:function(){
validate($(this));
}
});
//绑定密码事件
$("#pwd").focus(function(){
$("#pwdId").removeClass().addClass("import_prompt").html("密码长度为6-16");
}).blur(function(){
validate($(this));
});
//重复密码失去焦点事件
$("#repwd").blur(function(){
validate($(this));
});
//绑定昵称事件
$("#nickName").bind({
focus:function(){
$("#nickNameId").removeClass().addClass("import_prompt").html("1、包含汉字、字母、数字、下划线以及@!#$%&*<br/>特殊字符<br/>2、长度为4－20个字符<br/>3、一个汉字占两个字符");
},
blur:function(){
validate($(this));
}
});
//绑定关联手机号事件
$("#tel").focus(function(){
$("#telId").removeClass().addClass("import_prompt").html("1、手机号码以13，15，18开头<br/>2、手机号码由11位数字组成");
}).blur(function(){
validate($(this));
});
//绑定保密邮箱事件
$("#email").bind({
focus:function(){
$("#emailId").removeClass().addClass("import_prompt").html("请输入您常用的电子邮箱");
},
blur:function(){
validate($(this));
}
});
});
</script>
</head>
<body>
<div id="header"><img src="images/register_logo.gif" alt="logo"/></div>
<div id="main">
<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<span id="yname"/></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>
</div>
</body>
</html>
<img data-cke-saved-src="https://img-blog.csdn.net/20170507013054078?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzYwNzQwODg=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" src="https://img-blog.csdn.net/20170507013054078?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzYwNzQwODg=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />
<img data-cke-saved-src="https://img-blog.csdn.net/20170507013206280?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzYwNzQwODg=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" src="https://img-blog.csdn.net/20170507013206280?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzYwNzQwODg=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />
效果
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'sj2.jsp' starting page</title> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <style type="text/css"> div { display: block; } #navlist li { float: left; height: 23px; line-height: 26px; } .navlist_red { background-color: #ff6600; text-align: center; font-size: 14px; font-weight: bold; color: #FFF; width: 130px; } ul, li, ol, h1, dl, dd { list-style: none; margin: 0px; padding: 0px; } user agent stylesheetli { display: list-item; text-align: -webkit-match-parent; } </style> <link href="css/myCart.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript"> $(function(){ //点击复选框全选或全不选效果 $("#allCheckBox").click(function(){ var checked=$(this).is(":checked"); $(".cart_td_1").children().attr("checked",checked); }); //判断是否全选 function ifAllChecked(){ var checkedBoxs=$(".cart_td_1").children(); var sum=checkedBoxs.size(); var k=0; checkedBoxs.each(function(index,dom){ //is()方法判断是否匹配 if($(dom).is(":checked")) k++; }); if(k==sum){ //改变属性 attr(名称,值) $("#allCheckBox").attr("checked",true); }else{ $("#allCheckBox").attr("checked",false); } } ifAllChecked();//页面加载完后运行 //单选判断 $(".cart_td_1").children().click(function(){ ifAllChecked(); }); //计算总价与小计 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();//页面加载完后运行 //商品增加减少，flag为true时增加，flag为false时减少 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(); }; //点击增加 $(".cart_td_6").find("img[alt='minus']").click(function(){changeNumber(this,false);}); //点击减少 $(".cart_td_6").find("img[alt='add']").click(function(){changeNumber(this,true);}); //点击删除 $(".cart_td_8").find("a").click(function(){ $(this).parent().parent().prev().remove();//删除前一tr $(this).parent().parent().remove();//删除当前tr //刷新 productCount(); }); //点击删除所选 $("#deleteAll").click(function(){ //each()方法 parent()方法 //find()方法 siblings()方法 遍历 $("#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=loo;"#">我的淘宝</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" 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" 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" 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" 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" 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>
<img data-cke-saved-src="https://img-blog.csdn.net/20170507013349298?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzYwNzQwODg=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" src="https://img-blog.csdn.net/20170507013349298?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzYwNzQwODg=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />
