Jquery 表单校验注册+购物车
来源：互联网 发布：网络扁平化的优点 编辑：程序博客网 时间：2024/06/15 15:35
<!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" onclick="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" onclick="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" onclick="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" onclick="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" onclick="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> 0 0
- Jquery 表单校验注册+购物车
- Demo_javascript_注册表单校验
- 软件三层设计入门-表单校验，购物车
- jQuery实现购物车表单自动结算
- jQuery表单校验
- jQuery formValidator表单校验
- jquery validate表单校验
- jQuery表单校验 Validation
- JQuery表单校验
- JQuery之表单校验
- Jquery 表单校验
- jQuery表单校验
- Jquery 表单校验
- jQuery表单校验
- jQuery/表单校验
- jquery表单校验插件
- jquery校验表单
- jquery校验表单
- Android图形合成和显示系统---基于高通MSM8k MDP4平台
- caffe 命令及参数解析
- java、八大经典书籍，你看过几本？
- 基于《Selenium 2自动化测试实战》的学习笔记（1）—— 软件测试分类
- 线程学习总结-----/*自己编写*/
- Jquery 表单校验注册+购物车
- mongodb 访问权限控制
- 账号已被停用，请咨询系统管理员
- 剑指offer 40. 数组中只出现一次的数字
- [android]Gradle 应用插件︰ com.google.gms.google 服务
- [C++]bitset类用法
- 数据库链接错误，有可能不是用户名密码的问题
- 最全的Java笔试题库之选择题篇-总共234道【181~234】
- 内心空明
