淘宝网购物车jquery源码和网易新用户注册页面表单验证的练习
淘宝网购物车源码：
<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" />男 <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>
<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" />男 <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>
<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>
>
淘宝网购物车jquery源码和网易新用户注册页面表单验证的练习的更多相关文章
- 淘宝店铺应用android源码
一个淘宝店铺的app 界面模仿蘑菇街 完结版很多朋友想知道web端 我发上来 是用thinkphp框架 懂的同学拿去研究 ,之前做的前台 现在基本上不能用 就看个后台就好了 也比较简单 我放上来 大家 ...
- jQuery 源码分析(十二) 数据操作模块 html特性 详解
jQuery的属性操作模块总共有4个部分,本篇说一下第1个部分:HTML特性部分,html特性部分是对原生方法getAttribute()和setAttribute()的封装,用于修改DOM元素的特性 ...
- 淘宝网-接口测试白皮书V0.1
<软件自动化测试开发> 出版了 淘宝(中国)软件有限公司 接口测试白皮书 V0.1 淘宝网平台测试组(qa.taobao.com) 淘宝网-接口测试白皮书 2 目录 1 接口测试的背 ...
- jQuery源码分析系列
声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准 附上每一章的源码注释分析 :https://git ...
- [转] jQuery源码分析-如何做jQuery源码分析
jQuery源码分析系列(持续更新) jQuery的源码有些晦涩难懂,本文分享一些我看源码的方法,每一个模块我基本按照这样的顺序去学习. 当我读到难度的书或者源码时,会和<如何阅读一本书> ...
- [转]jQuery源码分析系列
文章转自:jQuery源码分析系列-Aaron 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准 附上每一章的源码注释分析 :https://github.com/JsAaro ...
- jQuery 源码分析和使用心得 - 关于源码
说到jQuery, 大家可能直觉的认为jQuery的源码应该就是一个jquery.xx.js这样的一个文件. 但是看到真正的源码的时候, 整个人都思密达了.jQuery的源码做的事远比你想象的多, 为 ...
- jQuery源码解析资源便签
最近开始解读jQuery源码,下面的链接都是搜过来的,当然妙味课堂 有相关的一系列视频,长达100多期,就像一只蜗牛慢慢爬, 至少品读三个框架,以后可以打打怪,自己造造轮子. 完全理解jQuery源代 ...
- jQuery源码逐行分析学习02(第一部分：jQuery的一些变量和函数)
第一次尝试使用Office Word,方便程度大大超过网页在线编辑,不过初次使用,一些内容不甚熟悉,望各位大神见谅~ 在上次的文章中,把整个jQuery的结构进行了梳理,得到了整个jQuery的简化结 ...
随机推荐
- 简易发号SQL,可用于生成指定前缀自增序列--改进版
使用merge语法实现新增or更新 首先创建表 CREATE TABLE Test.dbo.Increments ( Prefix varchar(50) NOT NULL, [MaxNum ] bi ...
- [bzoj3170]松鼠聚会
这个距离就是切比雪夫距离,有一个神奇的东西是说将(x,y)变成(x+y,x-y),然后就是曼哈顿距离,因此转化后对x坐标和y坐标分别统计排序和求和(求前缀和预处理+二分) 1 #include< ...
- processon刷文件的骚操作
https://github.com/ilikly/ProcessOnRegister用法自己看说明哈,群友亲测可用,而且也给别人用了...缺点是每轮都需要手动操作一下,并且需要俩微信号
- Codeforces 878D - Magic Breeding（bitset，思维题）
题面传送门 很容易发现一件事情,那就是数组的每一位都是独立的,但由于这题数组长度 \(n\) 很大,我们不能每次修改都枚举每一位更新其对答案的贡献,这样复杂度必炸无疑.但是这题有个显然的突破口,那就是 ...
- Codeforces 1383E - Strange Operation（线段树优化 DP or 单调栈+DP）
Codeforces 题目传送门 & 洛谷题目传送门 Yet another 自己搞出来的难度 \(\ge 2800\) 的题 介绍一个奇奇怪怪的 \(n\log n\) 的做法.首先特判掉字 ...
- Codeforces 547E - Mike and Friends（AC 自动机+树状数组）
题面传送门 好久每做过 AC 自动机的题了--做几个题回忆一下罢 AC 自动机能够解决多串匹配问题,注意是匹配,碰到前后缀的问题那多半不在 AC 自动机能解决的范围内. 在初学 AC 自动机的时候相信 ...
- Codeforces 1519F - Chests and Keys（暴搜+以网络流为状态的 dp）
Codeforces 题目传送门 & 洛谷题目传送门 难度终于出来了--又独立切掉一道 *3200,凯信(所以我已经独立切掉三道 *3200 了?) 首先考虑我们已经知道了每个宝箱上有哪些锁, ...
- miRAN 分析以及mRNA分析
一些参考资料 http://www.360doc.com/content/17/0528/22/19913717_658086490.shtml https://www.cnblogs.com/tri ...
- 在windows下使用shell,运行shell脚本
在Windows操作系统下运行Shell脚本,缺少的只是一个Git软件.其下载路径为Git - Downloading Package. 安装之后,将安装路径下的bin文件夹的路径作为环境变量.于是我 ...
- C++栈溢出
先看一段代码 #include<iostream> using namespace std; #define n 510 void sum(int a,int b) { cout<& ...