购物车的制作与注册表单验证

最新推荐文章于 2022-07-27 19:31:24 发布

嘴强程序员

最新推荐文章于 2022-07-27 19:31:24 发布

阅读量113

点赞数

文章标签： xhtml javascript html

本文链接：https://blog.csdn.net/qq_62898618/article/details/123439500

版权

淘宝购物车商品管理数量调整删除操作总价积分

关键词由CSDN通过智能技术生成

购物车的制作


<!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=gb2312" />
<title>淘宝购物车页面</title>
<link href="css/myCart.css" type="text/css" rel="stylesheet" />
<script type="text/javascript"> 
//封装
function $(sid){
	return document.getElementById(sid);
}

//全选
function myAll(){
	var cs = document.getElementsByName("cartCheckBox");
	var qx = $("allCheckBox");
	for(var i=0;i<cs.length;i++){
		cs[i].checked = qx.checked;
	}
} 

//控制单个选中
function selectSingle(){
	var cs = document.getElementsByName("cartCheckBox");
	var qx = $("allCheckBox");
	var f = true;//假设选中
	for(var i=0;i<cs.length;i++){
		if(cs[i].checked==false){//如果有一个没选中 全选框就不选中
			f = false;
			break;
		}
	}
	qx.checked = f;
} 
 
//删除单个商品
function deleteRow(rid){
	var tb = $("shopping");
	var index = $(rid).rowIndex;//根据行找到对应的行号
	tb.deleteRow(index);
	tb.deleteRow(index-1);
	myCalc()
} 

//批量删除
function deleteSelectRow(){
	var cs = document.getElementsByName("cartCheckBox");
	for(var i=0;i<cs.length;i++){
		if(cs[i].checked==true){
			deleteRow(cs[i].value);
			i--;
		}
	}
}

//控制数量的加减
function changeNum(rid,type){
	var row = $(rid);//找到对应行
	var c5 = row.cells[5];//找到第5列
	var num = c5.childNodes[2].value;//取到第5列第2个节点的值
	if(type=='minus'){
		if(num>1){
			num--;
		}
		else{
			alert("宝贝数量必须大于0！");
		}
	}
	else{
		num++;//每次点击都+1
	}
	c5.childNodes[2].value = num;//重新赋值
	
	myCalc()//每一次数量的改变都要重新计算总价以及合计
}

//计算单个商品的总价 以及 所有商品的合计
function myCalc(){
	var sum = 0;//保存所有商品的合计
	var score = 0;//保存所有商品积分合计
	
	var tb = $("shopping");//获取表格
	var rs = tb.rows;//获取表格所有的行
	for(var i=3;i<rs.length;i+=2){//遍历行的集合
		var cs = rs[i].cells;//依次获取每一行的所有列
		var price = cs[4].innerHTML;//获取每一行的单价
		var jf = cs[3].innerHTML;//获取每一行的单个积分
		var num = cs[5].childNodes[2].value;//获取每一行的数量
		var zj = price*num;//计算每一行的总价
		var rjf = jf*num;//计算每一行的总积分
		cs[6].innerHTML = zj;//赋值
		sum+=zj;//金额总计
		score+=rjf;//积分总计
	}
	$("total").innerHTML = sum;
	$("integral").innerHTML = score;
}

</script>
</head>
 
<body onload="myCalc()">
<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">
 <table width="100%" border="0" cellspacing="0" cellpadding="0" id="shopping">
 <form action="" method="post" name="myform">
  <tr>
    <td class="title_1"><input id="allCheckBox" type="checkbox" value="" onclick="myAll()" />全选</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" onclick="selectSingle()" /></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</td>
    <td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" onclick="changeNum('product1','minus')" class="hand"/> <input type="text"  value="1" class="num_input" readonly="readonly"/> <img src="images/taobao_adding.jpg" alt="add" onclick="changeNum('product1','add')"  class="hand"/></td>
    <td class="cart_td_7"></td>
    <td class="cart_td_8"><a href="javascript:deleteRow('product1');">删除</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" onclick="selectSingle()" /></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</td>
    <td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" onclick="changeNum('product2','minus')" class="hand"/> <input type="text"  value="1" class="num_input" readonly="readonly"/> <img src="images/taobao_adding.jpg" alt="add" onclick="changeNum('product2','add')"  class="hand"/></td>
    <td class="cart_td_7"></td>
    <td class="cart_td_8"><a href="javascript:deleteRow('product2');">删除</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"  onclick="selectSingle()"/></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</td>
    <td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" onclick="changeNum('product3','minus')" class="hand"/> <input id="num_3" type="text"  value="1" class="num_input" readonly="readonly"/> <img src="images/taobao_adding.jpg" alt="add" onclick="changeNum('product3','add')"  class="hand"/></td>
    <td class="cart_td_7"></td>
    <td class="cart_td_8"><a href="javascript:deleteRow('product3');">删除</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" onclick="selectSingle()" /></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</td>
    <td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" onclick="changeNum('product4','minus')" class="hand"/> <input id="num_4" type="text"  value="2" class="num_input" readonly="readonly"/> <img src="images/taobao_adding.jpg" alt="add" onclick="changeNum('product4','add')"  class="hand"/></td>
    <td class="cart_td_7"></td>
    <td class="cart_td_8"><a href="javascript:deleteRow('product4');">删除</a></td>
  </tr>
  
   <tr>
   <td  colspan="3"><a href="javascript:deleteSelectRow()"><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>
  </form>
</table>
 
</div>
</body>
</html>

CSS 封装

@charset "gb2312";
/* CSS Document */

body{
	margin:0px;
	padding:0px;
	font-size:12px;
	line-height:20px;
	color:#333;
   }
ul,li,ol,h1,dl,dd{
	list-style:none;
	margin:0px;
	padding:0px;
	}
a{
	color:#1965b3;
    text-decoration: none;
	}    
a:hover{
	color:#CD590C;
	text-decoration:underline;
	}
img{
	border:0px;
	vertical-align:middle;
	}
#header{
	height:40px;
	margin:10px auto 10px auto;
	width:800px;
	clear:both;
	}
#nav{
	margin:10px auto 10px auto;
	width:800px;
	clear:both;
	}
#navlist{
	width:800px;
	margin:0px auto 0px auto;
	height:23px;
	}
	#navlist li{
		float:left;
		height:23px;
		line-height:26px;
	}
	.navlist_red_left{
		background-image:url(../images/taobao_bg.png);
		background-repeat:no-repeat;
		background-position:-12px -92px;
		width:3px;
		}
	.navlist_red{
		background-color:#ff6600;
		text-align:center;
		font-size:14px;
		font-weight:bold;
		color:#FFF;
		width:130px;
		}
	.navlist_red_arrow{
		background-color:#ff6600;
		background-image:url(../images/taobao_bg.png);
		background-repeat:no-repeat;
		background-position:0px 0px;
		width:13px;
		}
	.navlist_gray{
		background-color:#e4e4e4;
		text-align:center;
		font-size:14px;
		font-weight:bold;
		width:150px;
		}
	.navlist_gray_arrow{
		background-color:#e4e4e4;
		background-image:url(../images/taobao_bg.png);
		background-repeat:no-repeat;
		background-position:0px 0px;
		width:13px;
		}
	.navlist_gray_right{
		background-image:url(../images/taobao_bg.png);
		background-repeat:no-repeat;
		background-position:-12px -138px;
		width:3px;
		}
#content{
	width:800px;
	margin:10px auto 5px auto;
	clear:both;
	}
	.title_1{
		text-align:center;
		width:50px;
		}
	.title_2{
		text-align:center;
		}
	.title_3{
		text-align:center;
		width:80px;
		}
	.title_4{
		text-align:center;
		width:80px;
		}
	.title_5{
		text-align:center;
		width:100px;
		}
	.title_6{
		text-align:center;
		width:80px;
		}
	.title_7{
		text-align:center;
		width:60px;
		}
	.line{
		background-color:#a7cbff;
		height:3px;
		}
	.shopInfo{
		padding-left:10px;
		height:35px;
		vertical-align:bottom;
		}
	.num_input{
		border:solid 1px #666;
		width:25px;
		height:15px;
		text-align:center;
		}
	.cart_td_1,.cart_td_2,.cart_td_3,.cart_td_4,.cart_td_5,.cart_td_6,.cart_td_7,.cart_td_8{
		background-color:#e2f2ff;
		border-bottom:solid 1px #d1ecff;
		border-top:solid 1px #d1ecff;
		text-align:center;
		padding:5px;
		}
	.cart_td_1,.cart_td_3,.cart_td_4,.cart_td_5,.cart_td_6,.cart_td_7{
		border-right:solid 1px #FFF;
		}
	.cart_td_3{
		text-align:left;
		}
	.cart_td_4{
		font-weight:bold;
		}
	.cart_td_7{
		font-weight:bold;
		color:#fe6400;
		font-size:14px;
		}
	.hand{
		cursor:pointer;
		}
.shopend{
	text-align:right;
	padding-right:10px;
	padding-bottom:10px;
	}
.yellow{
	font-weight:bold;
	color:#fe6400;
	font-size:18px;
	line-height:40px;
	}

注册表单验证！

标签摆放


<!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=gb2312" />
<title>新用户注册页面</title>
<link type="text/css" rel="stylesheet" href="css/register.css" />
<script type="text/javascript" src="js/register.js"></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 action="" method="post" name="myform" onsubmit="return checkForm()">
        <dl>
          <dt>通行证用户名：</dt>
          <dd><input type="text" id="userName" class="inputs userWidth" onfocus="userNameFocus()" onblur="userNameBlur()" /> @163.com</dd>
          <div id="userNameId"></div>
        </dl>
         <dl>
          <dt>登录密码：</dt>
          <dd><input type="password" id="pwd" class="inputs"  onfocus="pwdFocus()" onblur="pwdBlur()"/></dd>
          <div id="pwdId"></div>
        </dl>
         <dl>
          <dt>重复登录密码：</dt>
          <dd><input type="password" id="repwd" class="inputs"  onblur="repwdBlur()"/></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"  onfocus="nickNameFocus()" onblur="nickNameBlur()"/></dd>
          <div id="nickNameId"></div>
        </dl>
        <dl>
          <dt>关联手机号：</dt>
          <dd><input type="text" id="tel" class="inputs"  onfocus="telFocus()" onblur="telBlur()" /></dd>
          <div id="telId"></div>
        </dl>
        <dl>
          <dt>保密邮箱：</dt>
          <dd><input type="text" id="email" class="inputs" onfocus="emailFocus()" onblur="emailBlur()" /></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>

CSS 样式封装

@charset "gb2312";
/* CSS Document */

body,dl,dt,dd,div,form {padding:0;margin:0;}

#header,#main{
	width:650px;
	margin:0 auto;
	}
.bg{
	background-image:url(../images/register_bg.gif);
	background-repeat:no-repeat;
	width:6px;
	height:6px;
	}
	.bg_top_left{
		background-position:0px 0px;
		}
	.bg_top_right{
		background-position:0px -6px;
		}
	.bg_end_left{
		background-position:0px -12px;
		}
	.bg_end_right{
		background-position:0px -18px;
		}
	.bg_top{
		border-top:solid 1px #666666;
		}
	.bg_end{
		border-bottom:solid 1px #666666;
		}
	.bg_left{
		border-left:solid 1px #666666;
		}
	.bg_right{
		border-right:solid 1px #666666;
		}


.content{
	padding:10px;
	}
	.inputs{
		border:solid 1px #a4c8e0;
		width:150px;
		height:15px;
	}
	
	.userWidth{
		width:110px;
		}
	.content div{
		float:left;
		font-size:12px;
		color:#000;
		}
	dl{
		clear:both;
		}
	dt,dd{
		float:left;
		}
	dt{
		width:130px;
		text-align:right;
		font-size:14px;
		height:30px;
		line-height:25px;
		}
	dd{
		font-size:12px;
		color:#666666;
		width:180px;
		}
/*当鼠标放到文本框时，提示文本的样式*/
.import_prompt{
	border:solid 1px #ffcd00;
	background-color:#ffffda;
	padding-left:5px;
	padding-right:5px;
	line-height:20px;
	}
/*当文本框内容不符合要求时，提示文本的样式*/
.error_prompt{
	border:solid 1px #ff3300;
	background-color:#fff2e5;
	background-image:url(../images/li_err.gif);
	background-repeat:no-repeat;
	background-position:5px 2px;
	padding:2px 5px 0px 25px;
	line-height:20px;
	}
/*当文本框内容输入正确时，提示文本的样式*/
.ok_prompt{
	border:solid 1px #01be00;
	background-color:#e6fee4;
	background-image:url(../images/li_ok.gif);
	background-repeat:no-repeat;
	background-position:5px 2px;
	padding:2px 5px 0px 25px;
	line-height:20px;
	}

js代码块封装

// JavaScript Document

/*通过ID获取HTML对象的通用方法，使用$代替函数名称*/
function $(elementId){
	return document.getElementById(elementId);
	}
	
/*当鼠标放在通行证用户名文本框时，提示文本及样式*/	
function userNameFocus(){
	var userNameId=$("userNameId");
	userNameId.className="import_prompt";
	userNameId.innerHTML="1、由字母、数字、下划线、点、减号组成<br/>2、只能以数字、字母开头或结尾，且长度为4-18";
	}
	
/*当鼠标离开通行证用户名文本框时，提示文本及样式*/	
function userNameBlur(){
	var userName=$("userName");
	var userNameId=$("userNameId");
	var reg=/^[0-9a-zA-Z][0-9a-zA-Z_.-]{2,16}[0-9a-zA-Z]$/;
	if(userName.value==""){
		userNameId.className="error_prompt";
		userNameId.innerHTML="通行证用户名不能为空，请输入通行证用户名";
		return false;
		}
	if(reg.test(userName.value)==false){
		userNameId.className="error_prompt";
	    userNameId.innerHTML="1、由字母、数字、下划线、点、减号组成<br/>2、只能以数字、字母开头或结尾，且长度为4-18";
		return false;
		}
		userNameId.className="ok_prompt";
	    userNameId.innerHTML="通行证用户名输入正确";
		return true;
	}

/*当鼠标放在密码文本框时，提示文本及样式*/	
function pwdFocus(){
	var pwdId=$("pwdId");
	pwdId.className="import_prompt";
	pwdId.innerHTML="密码长度为6-16";
	}
	
/*当鼠标离开密码文本框时，提示文本及样式*/	
function pwdBlur(){
	var pwd=$("pwd");
	var pwdId=$("pwdId");
	if(pwd.value==""){
		pwdId.className="error_prompt";
		pwdId.innerHTML="密码不能为空，请输入密码";
		return false;
		}
	if(pwd.value.length<6 || pwd.value.length>16){
		pwdId.className="error_prompt";
	    pwdId.innerHTML="密码长度为6-16";
		return false;
		}
		pwdId.className="ok_prompt";
	    pwdId.innerHTML="密码输入正确";
		return true;
	}

	
/*当鼠标离开重复密码文本框时，提示文本及样式*/	
function repwdBlur(){
	var repwd=$("repwd");
	var pwd=$("pwd");
	var repwdId=$("repwdId");
	if(repwd.value==""){
		repwdId.className="error_prompt";
		repwdId.innerHTML="重复密码不能为空，请重复输入密码";
		return false;
		}
	if(repwd.value!=pwd.value){
		repwdId.className="error_prompt";
	    repwdId.innerHTML="两次输入的密码不一致，请重新输入";
		return false;
		}
		repwdId.className="ok_prompt";
	    repwdId.innerHTML="两次密码输入正确";
		return true;
	}
	
/*当鼠标放在昵称文本框时，提示文本及样式*/	
function nickNameFocus(){
	var nickNameId=$("nickNameId");
	nickNameId.className="import_prompt";
	nickNameId.innerHTML="1、包含汉字、字母、数字、下划线以及@!#$%&*特殊字符<br/>2、长度为4－20个字符<br/>3、一个汉字占两个字符";
	}
	
/*当鼠标离开昵称文本框时，提示文本及样式*/	
function nickNameBlur(){
	var nickName=$("nickName");
	var nickNameId=$("nickNameId");
	var k=0;
	var reg=/^([\u4e00-\u9fa5]|\w|[@!#$%&*])+$/;   // 匹配昵称
	var chinaReg=/[\u4e00-\u9fa5]/g;   //匹配中文字符
	if(nickName.value==""){
		nickNameId.className="error_prompt";
		nickNameId.innerHTML="昵称不能为空，请输入昵称";
		return false;
		}
	if(reg.test(nickName.value)==false){
		nickNameId.className="error_prompt";
	    nickNameId.innerHTML="只能由汉字、字母、数字、下划线以及@!#$%&*特殊字符组成";
		return false;
		}
	
	var len=nickName.value.replace(chinaReg,"ab").length;  //把中文字符转换为两个字母，以计算字符长度
	if(len<4||len>20){
		nickNameId.className="error_prompt";
	    nickNameId.innerHTML="1、长度为4－20个字符<br/>2、一个汉字占两个字符";
		return false;
		}
	
		nickNameId.className="ok_prompt";
	    nickNameId.innerHTML="昵称输入正确";
		return true;
	}	

/*当鼠标放在关联手机号文本框时，提示文本及样式*/	
function telFocus(){
	var telId=$("telId");
	telId.className="import_prompt";
	telId.innerHTML="1、手机号码以13，15，18开头<br/>2、手机号码由11位数字组成";
	}
	
/*当鼠标离开关联手机号文本框时，提示文本及样式*/	
function telBlur(){
	var tel=$("tel");
	var telId=$("telId");
	var reg=/^(13|15|18)\d{9}$/;
	if(tel.value==""){
		telId.className="error_prompt";
		telId.innerHTML="关联手机号码不能为空，请输入关联手机号码";
		return false;
		}
	if(reg.test(tel.value)==false){
		telId.className="error_prompt";
	    telId.innerHTML="关联手机号码输入不正确，请重新输入";
		return false;
		}
		telId.className="ok_prompt";
	    telId.innerHTML="关联手机号码输入正确";
		return true;
	}	


/*当鼠标放在保密邮箱文本框时，提示文本及样式*/	
function emailFocus(){
	var emailId=$("emailId");
	emailId.className="import_prompt";
	emailId.innerHTML="请输入您常用的电子邮箱";
	}
	
/*当鼠标离开保密邮箱文本框时，提示文本及样式*/	
function emailBlur(){
	var email=$("email");
	var emailId=$("emailId");
	var reg=/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
	if(email.value==""){
		emailId.className="error_prompt";
		emailId.innerHTML="保密邮箱不能为空，请输入保密邮箱";
		return false;
		}
	if(reg.test(email.value)==false){
		emailId.className="error_prompt";
	    emailId.innerHTML="保密邮箱格式不正确，请重新输入";
		return false;
		}
		emailId.className="ok_prompt";
	    emailId.innerHTML="保密邮箱输入正确";
		return true;
	}	

/*表单提交时验证表单内容输入的有效性*/
function checkForm(){
	  var flagUserName=userNameBlur();
	  var flagPwd=pwdBlur();
	  var flagRepwd=repwdBlur();
	  var flagNickName=nickNameBlur();
	  var flagTel=telBlur();
	  var flagEmail=emailBlur();
	  
	  userNameBlur();
	  pwdBlur();
	  repwdBlur();
	  nickNameBlur();
	  telBlur();
	  emailBlur();
	  
	  if(flagUserName==true &&flagPwd==true &&flagRepwd==true &&flagNickName==true&&flagTel==true&flagEmail==true){
		  return true;
		  }
		else{
			return false;
		}
	
	}

嘴强程序员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
购物车的制作与注册表单验证

购物车的制作<!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;.
复制链接

扫一扫