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

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

时间：2021-01-17 15:31:47

淘宝网购物车源码：

<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="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" />@</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="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;}

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

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。