淘宝网购物车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的简化结 ...
随机推荐
- Hi3516开发笔记（一）：海思HI3516DV300芯片介绍，入手开发板以及Demo测试
前言 目前主流国产芯片为RV11XX.RK33XX.Hi35XX系列,本系列开启Hi3516系列的开发教程. Hi3516DV300芯片介绍 Hi3516DV300为专业行Smart IP ...
- Python进阶（上下文管理器与with语句）
/*上下文管理器必须有__enter__和__exit__方法*/ class MyResource: def __enter__(self): print('链接资源') return self / ...
- dart系列之:dart类的扩展
目录 简介 使用extends 抽象类和接口 mixins 总结 简介 虽然dart中的类只能有一个父类,也就是单继承的,但是dart提供了mixin语法来绕过这样限制. 今天,和大家一起来探讨一下d ...
- logstash的filter之grok
logstash的filter之grokLogstash中的filter可以支持对数据进行解析过滤. grok:支持120多种内置的表达式,有一些简单常用的内容就可以使用内置的表达式进行解析 http ...
- [loj3076]公园
为了方便,对题意做以下处理: 1.称"西部主题"和"科幻主题"分别为黑色和白色 2.删去题中"保证没有两条不同的道路连接同一对景点"的条件 ...
- [loj3331]选课
考虑$P=0$,由于$T-\sum_{i=1}^{m}s_{i}\le 40$,因此一个第$i$个分类中最多得到$s_{i}+42$的学分,可以对每一类分别背包 暴力背包复杂度为$o(n^{2})$, ...
- springboot默认Thymeleaf模板引擎js的解决方案
<script th:inline="javascript"> var btnexam=[[${btnexam}]]; console.log(btnexam); va ...
- appdata 文件夹
appdata file AppData 的位置在 c:\Users\{UserName}\Appdata ,它是从 Windows Vista 开始引入的,直至今天的 Windows 7, 8, 1 ...
- [SDOI2012] Longge 的问题
题意 求\(\sum_{i}^{n} gcd(i,n)\) 想法 套路题 \(\sum_{i}^{n} gcd(i,n)\) \(=\) \(\sum_{i,i | n} i * phi(n/i)\) ...
- nginx负均
Nginx负载均衡详解 上一篇中我说啦nginx有哪些中负载均衡算法.这一结我就给如果操作配置的给大家做详细说明下. 首先给大家说下upstream这个配置的,这个配置是写一组被代理的服务器地址,然后 ...