淘宝网购物车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的简化结 ...
随机推荐
- vue.js3 学习笔记 (一)——mixin 混入
vue 2 中采用选项式API.如:data.methods.watch.computed以及生命周期钩子函数等等. mixin 混入,提供了一种非常灵活的方式,来分发 vue 组件中的可复用功能,一 ...
- Python批量爬取谷歌原图，2021年最新可用版
文章目录 前言 一.环境配置 1.安装selenium 2.使用正确的谷歌浏览器驱动 二.使用步骤 1.加载chromedriver.exe 2.设置是否开启可视化界面 3.输入关键词.下载图片数.图 ...
- [luogu5564]Say Goodbye
两树相同的定义与题中相同,并定义两树完全相同当且仅当在不允许基环旋转的条件下相同 枚举基环的长度$l$,根据置换群的理论,答案即$\frac{1}{l}\sum_{i=1}^{l}f(i)$(其中$f ...
- [bzoj5343]混合果汁
二分枚举答案,问题转化为计算至少取到一定体积,价格最少是多少,显然是贪心取最小,用线段树维护,然后因为要判断答案,所以可持久化一下即可. 1 #include<bits/stdc++.h> ...
- C/C++ Qt 基础通用组件应用
QT 是一个跨平台C++图形界面开发库,利用QT可以快速开发跨平台窗体应用程序,在QT中我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率. 目前,QT开发中常用的基础 ...
- 面试官又整新活，居然问我for循环用i++和++i哪个效率高？
原创:微信公众号 码农参上,欢迎分享,转载请保留出处. 前几天,一个小伙伴告诉我,他在面试的时候被面试官问了这么一个问题: 在for循环中,到底应该用 i++ 还是 ++i ? 听到这,我感觉这面试官 ...
- 【JAVA】编程（6）--- 应用IO流拷贝文件夹（内含多个文件）到指定位置
此程序应用了: File 类,及其常用方法: FileInputStream,FileOutputStream类及其常用方法: 递归思维: package com.bjpowernode.javase ...
- Codeforces 986C - AND Graph（dfs）
Codeforces 题面传送门 & 洛谷题面传送门 考虑 DFS 一遍遍历每个连通块. 当我们遍历到一个点 \(x\) 时,我们就建立一个虚点 \((2^n-1-x)'\) 表示我们要访问 ...
- Codeforces 730L - Expression Queries（大模拟）
Codeforces 题面传送门 & 洛谷题面传送门 大模拟(?)+阿巴细节题,模拟赛时刚了 3h 最后因为某个细节写挂 100->40/ll/ll(下次一定不能再挂分了啊 awa) 首 ...
- base64和图片转换
Base64是一种8Bit字节数据的编码方式. 在参数传输的过程中经常遇到的一种情况:使用全英文的没问题,但一旦涉及到中文就会出现乱码情况.与此类似,网络上传输的字符并不全是可打印的字符,比如二进制文 ...