Jquery 表单校验注册+购物车

最新推荐文章于 2023-08-22 20:47:45 发布

_苏小白

最新推荐文章于 2023-08-22 20:47:45 发布

阅读量1.2k

点赞数 1

本文链接：https://blog.csdn.net/qq_36074043/article/details/71126708

版权

<!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>

_苏小白

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Jquery 表单校验注册+购物车

register.html //检查用户名 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){
复制链接

扫一扫