淘宝网购物车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的简化结 ...

随机推荐

Mac下Shell脚本使用学习笔记（二）
参考文献 Shell 教程 MAC常用终端命令行 Mac下Shell脚本使用 (7)Shell echo命令: 命令格式:echo string ①显示普通字符串:echo "It is a ...
菜鸡的Java笔记实践 - java 数组操作
讲解一个继承的实现思路要求定义一个数组操作类(Array类),在这个类里面可以进行整型数组的操作,由外部传入数组的大小 ,并且要求实现数据的保存以及数据的 ...
基于Guava API实现异步通知和事件回调
本文节选自<设计模式就该这样学> 1 基于Java API实现通知机制当小伙伴们在社区提问时,如果有设置指定用户回答,则对应的用户就会收到邮件通知,这就是观察者模式的一种应用场景.有些小 ...
Hi3516开发笔记（二）：Hi3516虚拟机基础环境搭建之串口调试、网络连接以及sftp文件传输
前言搭建Hi3516的基础虚拟机,为交叉编译环境搭建前期工作.后续会编译一个基本的C语言程序Demo,在HI3516上跑. 虚拟机开发本对虚拟机做了一些基本要求,如下图: 其实重 ...
[hdu4747]Mex
首先计算出以1为左端点的所有区间的mex,考虑删除左端点仍然维护这个序列:设当前删除点下一次出现在y,y~n的mex不变,从左端点到y的点中大于删除值的点要变成删除值,因为这个是不断递增的,所以是一段 ...
Spring MVC应用
Spring MVC简介 1.1 经典三层结构在JavaEE开发中,几乎全部都是基于B/S架构的开发.那么在B/S架构中,系统标准的三层架构包括:表现层.业务层.持久层.三层架构在我们的实际开发中使 ...
C#.NET 操作Windows服务（安装、卸载）
注意点: 1.安装时要请求到管理员权限. 2.卸载前,一定要停止掉Windows服务,否则需要重启或注销电脑.代码无法停止服务时,使用services.msc来停止. 开始: 1.新建一个名为&quo ...
353 stars Java项目！Java小白必看！austin介绍【第一话】
有好几个群友问我为什么最近更新变慢了.工作忙是一方面,另一方面是我更新文章的动力确实下降了.近大半年一直在更新的<对线面试官>系列,到现在已经40篇了. 说实话,当时我更新该系列有很大一部 ...
贪心/构造/DP 杂题选做Ⅲ
颓!颓!颓!(bushi 前传: 贪心/构造/DP 杂题选做贪心/构造/DP 杂题选做Ⅱ 51. CF758E Broken Tree 讲个笑话,这道题是 11.3 模拟赛的 T2,模拟赛里那道题的 ...
NextPolish对基因组进行polish
NextPolish由未来组开发对基因组序列进行polish的工具,对三代以及二代均可进行polish. gituhp地址:https://github.com/Nextomics/NextPolis ...

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

淘宝网购物车源码：

CSS:

register.css

myCart.css

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

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

随机推荐

热门专题