當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2023/12/20 编程问答 34 豆豆

生活随笔收集整理的這篇文章主要介紹了淘宝网购物车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="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" />男 <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;}

網易新用戶注冊頁面源碼：

轉載于:https://www.cnblogs.com/java-123/p/9316862.html

總結

以上是生活随笔為你收集整理的淘宝网购物车jquery源码和网易新用户注册页面表单验证的练习的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： linux ssh yum升级_Linu
下一篇：微信语音怎么转发给好友