淘宝网购物车源码：

<html lang="en">
<head>
<meta charset="UTF-8">
<title>网易新用户注册页面</title>
<link rel="stylesheet" href="css/register.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<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="data:images/register_logo.gif" alt="logo" /></div><div id="main"><form id="registerForm" action="" method="post" name="myform"><dl><dt>通行证用户名：</dt><dd><input type="text" id="userName" class="inputs userWidth" />@163.com</dd><dd><div id="userNameId" style="color: red"></div></dd></dl><dl><dt>登录密码：</dt><dd><input type="password" id="pwd" class="inputs" /></dd><dd><div id="pwdId"></div></dd></dl><dl><dt>重复登录密码：</dt><dd><input type="password" id="repwd" class="inputs" /></dd><dd><div id="repwdId"></div></dd></dl><dl><dt>性别：</dt><dd><input name="sex" type="radio" value="" checked="checked" />男 <inputname="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><dd><div id="nickNameId"></div></dd></dl><dl><dt>关联手机号：</dt><dd><input type="text" id="tel" class="inputs" /></dd><dd><div id="telId"></div></dd></dl><dl><dt>保密邮箱：</dt><dd><input type="email" id="email" class="inputs" /></dd><dd><div id="emailId"></div></dd></dl><dl><dt></dt><dd><input name=" " type="image" src="data:images/button.gif" /></dd></dl></form></div>
</body>
</html>
>

CSS:

register.css

* {padding:0;margin:0;}#header,#main{width:600px;margin:0 auto;
}
#main{padding: 10px;border: 1px #999999 solid;border-radius: 8px;overflow: hidden;
}
.inputs{border:solid 1px #a4c8e0;width:150px;height:15px;
}.userWidth{width:110px;
}
dl dd div{display: inline-block;font-size:12px;color:#000;margin-left: 5px;line-height: 18px;
}
dl{clear:both;line-height: 22px;
}
dt,dd{float:left;
}
dt{width:110px;text-align:right;font-size:14px;height:30px;line-height:25px;
}
dd{font-size:12px;color:#666666;
}
dl>dd:first-of-type{width: 170px;}
/*褰撻紶鏍囨斁鍒版枃鏈鏃讹紝鎻愮ず鏂囨湰鐨勬牱寮�*/
.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:#fff2e5 url(../images/li_err.gif)5px 2px  no-repeat;padding:2px 5px 0px 25px;line-height:20px;
}
/*褰撴枃鏈鍐呭杈撳叆姝ｇ‘鏃讹紝鎻愮ず鏂囨湰鐨勬牱寮�*/
.ok_prompt{border:solid 1px #01be00;background:#e6fee4 url(../images/li_ok.gif) 5px 2px no-repeat;padding:2px 5px 0px 25px;line-height:20px;
}

myCart.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;}

网易新用户注册页面源码：

<html lang="en">
<head>
<meta charset="UTF-8">
<title>网易新用户注册页面</title>
<link rel="stylesheet" href="css/register.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<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="data:images/register_logo.gif" alt="logo" /></div><div id="main"><form id="registerForm" action="" method="post" name="myform"><dl><dt>通行证用户名：</dt><dd><input type="text" id="userName" class="inputs userWidth" />@163.com</dd><dd><div id="userNameId" style="color: red"></div></dd></dl><dl><dt>登录密码：</dt><dd><input type="password" id="pwd" class="inputs" /></dd><dd><div id="pwdId"></div></dd></dl><dl><dt>重复登录密码：</dt><dd><input type="password" id="repwd" class="inputs" /></dd><dd><div id="repwdId"></div></dd></dl><dl><dt>性别：</dt><dd><input name="sex" type="radio" value="" checked="checked" />男 <inputname="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><dd><div id="nickNameId"></div></dd></dl><dl><dt>关联手机号：</dt><dd><input type="text" id="tel" class="inputs" /></dd><dd><div id="telId"></div></dd></dl><dl><dt>保密邮箱：</dt><dd><input type="email" id="email" class="inputs" /></dd><dd><div id="emailId"></div></dd></dl><dl><dt></dt><dd><input name=" " type="image" src="data:images/button.gif" /></dd></dl></form></div>
</body>
</html>
>

转载于:https://www.cnblogs.com/java-123/p/9316862.html

淘宝网购物车jquery源码和网易新用户注册页面表单验证的练习相关推荐

  1. 淘宝网【附源码-仅学习】

    还想起刚开始学完HTML时候自己做的第一个项目就是这个淘宝网页,由于当时还没有学JS,网页用了大量的超链接,而且仅兼容最新版的谷歌与IE,所以仅适合刚学完Html的同学作为学习参考,我已经将提取链接放 ...

  2. 如何秒下单？python的淘宝秒杀抢购下单源码参考

    如何秒下单?python的淘宝秒杀抢购下单源码参考 疫情如期,隔离还在继续,何时工作是一个头大的问题,最近在看口罩,不少电商平台都有放出口罩,当然,手残党将会也会是一直难以下手,你可能很难抢得到,故找 ...

  3. 淘宝top sdk java源码中的问题

    最近做一个项目,需要对接拼多多的api接口,其本身没有提供sdk,但是发现api设计与淘宝top结构非常类似,之前由于对接过淘宝的top,对淘宝top sdk的结构比较了解,且淘宝sdk整体比较清晰, ...

  4. Uni-APP微商淘宝客小程序源码

    ☑️ 品牌:uniapp ☑️ 语言:vue ☑️ 类型:微商淘宝客小程序源码 ☑️ 支持:小程序

  5. iOS物理碰撞、唱吧音频处理、仿淘宝联动效果等源码

    iOS精选源码 物理仿真 碰撞 陀螺仪 使用 仿淘宝详情和每日优鲜的一个联动效果 JJNetwork网络库 iOS列表选择弹框 网络视频直播类--原生socket音视频实时传输--智能家居 Skele ...

  6. 我秀秀淘宝购物导航淘宝客api程序源码版(.net源码)

    程序介绍: 程序采用.net 2.0进行开发,全自动应用淘客api,自动采集信息,无需,手工更新,源码完全开放. 针对淘客3/300毫秒的查询限制,系统采用相应的解决方案,可以解决大部分因此限制带来的 ...

  7. 手机淘宝秒杀页面html源码

    下载地址 一款商品秒杀页面html源码,仿淘宝手机端商品秒杀. dd:

  8. iOS物理碰撞、唱吧音频处理、仿淘宝联动效果等源码 1

    iOS精选源码 物理仿真 碰撞 陀螺仪 使用 仿淘宝详情和每日优鲜的一个联动效果 JJNetwork网络库 iOS列表选择弹框 网络视频直播类–原生socket音视频实时传输–智能家居 Skeleto ...

  9. Python实现淘宝京东秒杀！源码拿去吧！

    淘宝秒杀 from selenium import webdriver from time import sleep import datetime#打开一个谷歌浏览器,并且开始与浏览器会话 dr = ...

  10. 2022 淘宝买家秀API接口源码

    看到蛮多api站都有这个接口,于是我就收集了一些图片做成了这个随机输出图片的接口, 这个源码942张图片(无重复)

最新文章

  1. 每日一皮：很多时候你和Bug就像这样！
  2. java计算器程序代码实现加减乘除_Python+tkinter能实现计算器！太神奇了
  3. 一个程序员眼中的好UI
  4. LeetCode题组：第169题-多数元素
  5. VTK：几何对象之SourceObjects
  6. linux下常用快捷键
  7. CodeForces - 1345E Quantifier Question(dfs实现拓扑序)
  8. PWN-PRACTICE-BUUCTF-11
  9. 柯里化的前生今世（四）：编译器与解释器
  10. 机器学习、深度学习方面书籍收集（持续更新……）
  11. 时点数列序时平均数_时点数列序时平均数计算方法研究
  12. mybatis 自定义插件的使用
  13. 20200725每日一句
  14. tensorrt 分割_超多，超快，超强！百度飞桨发布工业级图像分割利器PaddleSeg
  15. Rethinking the smaller-norm-less-infromative assumption in channel pruning of convolution layers
  16. cmd net命令详解与图片示意
  17. springboot版的微信公众号,订阅号
  18. Java的LocalDateTime与mysq的datatime数据类型匹配不了
  19. 用mysql设计一个KTV点歌系统_KTV点歌系统(JAVA+MYSQL)
  20. 游戏策划试题（1）——摘自牛客网

热门文章

  1. Python安装Github下载的包，以SimpleCV为例
  2. vue安装axios以及如何使用axios
  3. springboot大学生实习管理系统
  4. 项目中常用字典表 —— 各个国家简称映射
  5. 手把手教你学DSP(TMS320X281X) 2020-11-30
  6. 从零开始学USB（三、基础知识3）
  7. 《数字图像处理》实验三
  8. mtk java_MTK，mrp,JAVA你了解多少?
  9. 计算机组成原理（第3版）思考题与习题答案----唐朔风 编著
  10. 58同城溢价私有化，互联网“前浪”躲不过“七年之痒”？