2019-11-21

一、
任務(wù)1:驗證注冊頁面中的電子郵箱
代碼:
1.html文件
<link rel="stylesheet" href="css/register.css">
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
(document).ready(function(){("#formRegister").submit(function(){
var mail=$("#email").val();
if(mail==""){//檢測Email是否為空
alert("Email不能為空");
return false;
}
if(mail.indexOf('@')==-1){
alert("Email格式不正確必須包含@");
return false;
}
if(mail.indexOf('.')==-1){
alert("Email格式不正確必須包含.");
return false;
}
return true;
})
})
</script>
</head>

<body>
<div id="container">
<iframe id="head" runat="server" src="head.htm" width="980px" height="136px" frameborder="0" scrolling="no"></iframe>
<div id="main" class="reg_bg">
<section class="register">
<form id="formRegister" method="post" action="register_success.htm">
<dl>
<dt>名字:</dt>
<dd><input id="fname" type="text" class="reg_text" size="24" /></dd>
</dl>
<dl>
<dt>姓氏:</dt>
<dd><input id="lname" type="text" class="reg_text" size="24" /></dd>
</dl>
<dl>
<dt>登錄名:</dt>
<dd><input name="sname" type="text" class="reg_text" size="24" />(可包含 a-z歼冰、0-9 和下劃線)</dd>
</dl>
<dl>
<dt>密碼:</dt>
<dd><input id="pass" type="password" class="reg_text" size="26" />(至少包含 6 個字符)</dd>
</dl>
<dl>
<dt>再次輸入密碼:</dt>
<dd><input id="rpass" type="password" class="reg_text" size="26" /> </dd>
</dl>
<dl>
<dt>電子郵箱:</dt>
<dd><input id="email" type="text" class="reg_text" size="24" />(必須包含 @ 和.字符)</dd>
</dl>
<dl>
<dt>性別:</dt>
<dd>
<input id="gen" style="border:0px;" type="radio" value="男" checked="checked" />
<img src="images/Male.gif" width="23" height="21" alt="alt" />男?
<input name="gen" style="border:0px;" type="radio" value="女" class="input" />
<img src="images/Female.gif" width="23" height="21" alt="alt" />女
</dd>
</dl>
<dl>
<dt>頭像:</dt>
<dd><input type="file" /> </dd>
</dl>
<dl>
<dt>愛好:</dt>
<dd>
<label>
<input type="checkbox" id="checkbox" value="checkbox" />
</label>
運動??
<label>
<input type="checkbox" id="checkbox2" value="checkbox" />
</label>
聊天??
<label>
<input type="checkbox" id="checkbox3" value="checkbox" />
</label>
玩游戲
</dd>
</dl>
<dl>
<dt>出生日期:</dt>
<dd>
<input id="nYear" class="reg_text n4" id="nYear" value="yyyy" maxlength="4" />?年??
<select id="nMonth">
<option value="" selected="selected">[選擇月份]</option>
<option value="0">一月</option>
<option value="1">二月</option>
<option value="2">三月</option>
<option value="3">四月</option>
<option value="4">五月</option>
<option value="5">六月</option>
<option value="6">七月</option>
<option value="7">八月</option>
<option value="8">九月</option>
<option value="9">十月</option>
<option value="10">十一月</option>
<option value="11">十二月</option>
</select>?月??
<input id="nDay" class="reg_text n4" value="dd" size="2" maxlength="2" />日
</dd>
</dl>
<dl>
<dt>?
</dt>
<dd>
<input type="image" id="Button" style="border:0px;" src="images/submit.gif" /> <img src="images/reset.gif" onClick="javascript:form1.reset();" style="cursor:pointer;" alt="重置" />
</dd>
</dl>
</form>
</section>
<section class="registerRight">
<h4><img src="images/read.gif" alt="alt" />閱讀貴美網(wǎng)服務(wù)協(xié)議 </h4>
<textarea id="textarea" cols="30" rows="15">歡迎閱讀服務(wù)條款協(xié)議瘤袖,本協(xié)議闡述之條款和條件適用于您使用Gmgw.com網(wǎng)站的各種工具和服務(wù)。
本服務(wù)協(xié)議雙方為貴美與貴美網(wǎng)用戶影暴,本服務(wù)協(xié)議具有合同效力。
貴美的權(quán)利和義務(wù)
1.貴美有義務(wù)在現(xiàn)有技術(shù)上維護整個網(wǎng)上交易平臺的正常運行,并努力提升和改進技術(shù)犬第,使用戶網(wǎng)上交易活動的順利。
2.對用戶在注冊使用貴美網(wǎng)上交易平臺中所遇到的與交易或注冊有關(guān)的問題及反映的情況藏否,貴美應(yīng)及時作出回復(fù)瓶殃。
3.對于在貴美網(wǎng)網(wǎng)上交易平臺上的不當(dāng)行為或其它任何貴美認為應(yīng)當(dāng)終止服務(wù)的情況,貴美有權(quán)隨時作出刪除相關(guān)信息副签、終止服務(wù)提供等處理遥椿,而無須征得用戶的同意。
4.因網(wǎng)上交易平臺的特殊性淆储,貴美沒有義務(wù)對所有用戶的注冊資料冠场、所有的交易行為以及與交易有關(guān)的其他事項進行事先審查。
</textarea>
</section>
</div>
<iframe id="foot" runat="server" src="foot.htm" width="980px" height="150px" frameborder="0" scrolling="no"></iframe>
</div>
</body>
</html>
2.CSS文件
body{
border:0px;
padding:0px;
margin:0px auto;
font:12px Tahoma;
}
div,ul,li,dt,dl {
float:left;
margin:0px auto;
padding:0px;
}
li{
list-style:none;
}
a:link {color:#333333;text-decoration: none;}
a:visited {color:#333333;text-decoration: none;}
a:active {color:#333333;text-decoration: none;}
a:hover {color:#ff7300;}

input {
border:1px #333333 solid;
margin:0px;
padding:0px;
}

a img{
border:0px;
}

.red {color:red;font-weight: bold;text-align:left;}
.b {font-weight:bold;}

container{

width:980px;
margin:0 auto;
float:none;

}

/頭部 從logo到服務(wù)熱線/

header {

width:980px;
height:136px;
margin:0px auto;
background:url(../images/h_bg.jpg) no-repeat -22px 0px;

}

logo {

width:250px;
height:108px;
float:left;
background:url(../images/h_bg.jpg) no-repeat -22px 0px;

}

/右上方菜單 購物車 幫助中心 加入收藏 設(shè)為首頁等本砰,.pic1至.pic6分別為菜單前的小圖標碴裙,h_text為頭部文本/
.upright_menu {
float:right;padding:15px 20px 0px 0px;
}
.pic{width:28px;height:26px;}
.pic1{background:url(../images/icon.gif) no-repeat;}
.pic2{background:url(../images/icon.gif) no-repeat -28px 0px;}
.pic3{background:url(../images/icon.gif) no-repeat -56px 0px;}
.pic5{background:url(../images/icon.gif) no-repeat -84px 0px;}
.pic6{background:url(../images/icon.gif) no-repeat -112px 0px;}
.h_text{padding:6px 5px 0px 5px; padding-top:8px\0;text-align:center;}
.login {background:url(../images/icon.gif) no-repeat 0px -25px;}
.reg {background:url(../images/icon.gif) no-repeat 0px -25px;}

.upright_bottom{width:600px;height:26px;float:right;padding:7px 0px 0px 0px;}
.bt {width:38px;height:26px;}
.hello {padding:11px 33px 0px 0px;color:#636362;letter-spacing:3px;}
.nav{width:980px;}
.nav li {
width:84px;
height:30px;
float:left;
text-align:center;
font-weight:bold;
}
.nav li a{padding:8px 10px;}
.nav li a:link,.nav li a:active,.nav li a:visited{
padding:8px 10px;
color:#333333;
font-size:13px;
}
.nav li a:hover{
padding:8px 10px;
background:url(../images/nav_bg.png) no-repeat !important;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled="true",sizingMethod="scale",src="../images/nav_bg.png");
_background-image:none;
}

/主體/

main{

width:980px;
margin:0 auto;
border:0px;
float:left;

}

/主體左部 整個商品分類部分/

left{

width:204px;
height:644px;
padding:38px 0px 0px 0px;
background:url(../images/bg.gif) no-repeat;

}

.left_list,.right_list{padding:0px 10px 0px 13px;width:174px;}
.left_class{
font-size:14px;
color:#ff7300;
font-weight:bold;
float:none;
padding:9px 0px 0px 0px;
}
.left_li{color:#636362;width:58px;line-height:24px;}

.width_8px{width:8px;height:644px;}

/主體中部 從大幅輪播圖(藍色印象)到瘋狂采購(IBM上網(wǎng)本)/

content{

width:527px;
background:url(../images/bg.gif) no-repeat -212px 0px;

}
.content_top{width:527px;padding-top:8px;height:182px;}

adv1,#adv2,#adv3,#adv4{display:none; }

adv {position:absolute;left:480px;top:315px;text-align:center;}

adv a{/設(shè)置無下劃線、文字背景超連接樣式/

font-size:13px;
text-decoration:none;
background-color:#cccccc;
padding:0px 5px;

}

.content_list{width:524px;height:449px;padding-top:58px;*padding-top:50px;}
.content_li{width:166px;padding:3px 0px;text-align:center;}
.content_img {width:142px;height:89px;float:none;text-align:center;}

/主體右部 從公告欄到手機充值/

right{

width:233px;
/*_margin-right:-3px; 浮動層里有文字則需要此行*/
height:644px;
background:url(../images/bg.gif) no-repeat -747px 0px;

}

.right_list dl{padding:10px 10px 0px 0px;*width:190px;}
.right_list dt{padding:0px 5px 0px 0px;}
.right_list dd{line-height:17px;white-space:nowrap;}
.right_list img{border:1px solid #9ea0a2;}

.r1{width:200px;height:170px;}
.r2 dl dt img{width:60px;height:47px;}
.r2 dd {padding-top:20px;}

tab{padding-top:14px;}

tabtitle1{cursor:pointer;width:80px;height:50px;background:url(../images/bg.gif) no-repeat -761px -430px;}

tabtitle2{cursor:pointer;width:153px;height:50px;background:url(../images/bg.gif) no-repeat -840px -430px;}

tab1,#tab2{display:none;}

/底部 從友情鏈接到最后/

footer{

width:980px;
height:150px;
float:none;

}
.copyright{width:980px;text-align:center;line-height:20px;}
.register_textBroader{width:125px;}

/對聯(lián)廣告 兩邊主圖片層和關(guān)閉圖片層/

advLeft{

position:absolute;
height:74px;
width:74px;
z-index:1;

}

advRight{

position:absolute;
height:80px;
width:80px;
z-index:1;

}

closeLeft{

cursor:pointer;
position:absolute;
height:13px;
width:13px;
z-index:2;

}

closeRight{

cursor:pointer;
position:absolute;
height:13px;
width:13px;
z-index:2;

}

.register{float: left; padding-top: 40px;width: 650px;}
.registerRight{float: right; width: 300px; padding-top: 40px}

/列表頁/
.list_bg {background:url(../images/list_bg.gif) repeat-x;}
.reg_text{width:130px;height:18px;margin:5px 5px; }

/注冊頁/

formRegister dl{clear: both;}

formRegister dt{float: left;text-align:right; width:120px; height: 35px; line-height: 35px;}

formRegister dd{width:480px; float:left; height: 35px; line-height: 35px;}

.reg_bg {background:url(../images/reg_bg.gif) repeat-x;}
.login_bg {padding-top:50px;background:url(../images/login_bg.gif) repeat-x;}
textarea{border:1px solid #cccccc;padding:5px;}

/長寬及對齊点额、浮動/
.a_l{text-align:left;}
.a_r{text-align:right;}
.a_c{text-align:center;}

.f_l{float:left;}
.f_r{float:right;}
.f_n{float:none;}

/input大小/
.n4{width:35px;}

.w3p{width:3%;}
.w10p{width:10%;}
.w15p{width:15%;}
.w20p{width:20%;}
.w25p{width:25%;}
.w50p{width:50%;}
.w63p{width:63%;}
.w87p{width:87%;}

.w9{width:9px;}
.w84{width:84px;}
.w81 {width:81px;}
.w100{width:100px;}
.w129 {width:129px;}
.w252 {width:252px;}
.w350{width:350px;}
.w364{width:364px;}
.w507{width:507px;}

.h24 {height:24px;}
.h32 {height:32px;}
.h34 {height:34px;}
.h35 {height:35px;}
.h40 {height:40px;}
.h58 {height:58px;}
.h65 {height:65px;}
.h460 {height:460px;}

.h20p {height:20%;}
.h37p {height:37%;}
.h43p {height:43%;}

二舔株、
(1)知識點5:校驗提示
(2)任務(wù)2:文本輸入提示特效
代碼:
1.html文件(1)
<link href="css/leisure.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
(document).ready(function(){("#myform :text").focus(function(){
if((this).val()=="請輸入正確的郵箱地址"){(this).val("");
}
(this).css("border","1px solid #ff0000"); })("#email").blur(function(){
var email = (this).val(); if(email==""){("#DivEmail").html("<font color='red'>郵箱不能為空</font>");
(this).focus(); }else if(email.indexOf("@")==-1){("#DivEmail").html("<font color='red'>郵箱必須包含@</font>");
(this).focus(); }else if(email.indexOf(".")==-1){("#DivEmail").html("<font color='red'>郵箱必須包含.</font>");
(this).focus(); }else{("#DivEmail").html("");
}
})
("#myform :text").blur(function(){(this).css("border","1px solid #000");
})
})
</script>
</head>
<body>
<div id="header" class="main">
<div id="headerLeft">
<img src="images/logo.gif" />
</div>
<div id="headerRight">注冊 | 登錄 | 幫助</div>
</div>
<div class="register">
<form method="post" name="myform" id="myform">
<h1 class="bold">注冊休閑網(wǎng)</h1>
<dl>
<dt>您的Email:</dt>
<dd><input id="email" type="text" class="inputs" /><span id="DivEmail"></span></dd>
</dl>
<dl>
<dt>輸入密碼:</dt>
<dd><input id="pwd" type="password" class="inputs" /><span id="DivPwd"></span></dd>
</dl>
<dl>
<dt>再輸入一遍密碼:</dt>
<dd><input id="repwd" type="password" class="inputs" /><span id="DivRepwd"></span></dd>
</dl>
<dl>
<dt>您的姓名:</dt>
<dd><input id="user" type="text" class="inputs" /><span id="DivUser"></span></dd>
</dl>
<dl>
<dt>性別:</dt>
<dd>
<input name="sex" type="radio" value="1" checked="checked" />男
<input name="sex" type="radio" value="0" />女</dd>
</dl>
<dl>
<dt class="left">出生日期:</dt>
<dd><select name="year">
<option value="1998">1998</option>
</select>年
<select name="month">
<option value="1">1</option>
</select>月
<select name="day">
<option value="12">12</option>
</select>日</dd>
</dl>
<dl>
<dt>?</dt>
<dd><input name="btn" type="submit" value="注冊" class="rb1" /></dd>
</dl>
</form>
</div>
<div id="footer" class="main"><a href="#">關(guān)于我們</a> | <a href="#">誠聘英才</a> |<a href="#"> 聯(lián)系方式</a> | <a href="#">幫助中心</a></div>
</body>
</html>

1.html文件(2)

<link href="css/leisure.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
      //綁定失去焦點事件
      $("#email").blur(checkEmail);
      $("pwd").blur(checkPass);
      $("Repwd").blur(checkRePass);
      $("user").blur(checkUser);
      //提交表單,調(diào)用驗證函數(shù)
      $("#myform").submit(function(){
          var flag = true;
          if(!checkEmail()) flag = false;
          if(!checkPass()) flag = false;
          if(!checkRePass()) flag = false;
          if(!checkUser()) flag = false;
          return flag;
          })
      })
  //驗證Email
  function checkEmail(){
      var $mail = $("#email");
      var $divID = $("#DivEmail");
      $divID.html("");
      if($mail.val()==""){
          $divID.html("Email不能為空");
          return false;
          }
      if($mail.val().indexOf("@")==-1){
          $divID.html("Email格式不正確还棱,必須包含@");
          return false;
          }
      if($mail.val().indexOf(".")==-1){
          $divID.html("Email格式不正確载慈,必須包含.");
          return false;
          }
      return true;
      }
  //驗證輸入密碼
  function checkPass(){
      var $pwd = $("#pwd");
      var $divID = $("#DivPwd");
      $divID.html("");
      if($pwd.val()==""){
          $divID.html("密碼不能為空");
          return false;
          }
      if($pwd.val().length<6){
          $divID.html("密碼必須等于或大于6個字符");
          return false;
          }
      return true;
      }
  //驗證重復(fù)密碼
  function checkRePass(){
      var $pwd = $("#pwd");
      var $repwd = $("#repwd");
      var $divID = $("#DivRepwd");
      $divID.html("");
      if($pwd.val()!=$repwd.val()){
          $divID.html("兩次輸入的密碼不一致");
          return false;
          }
      return true;
      }
  //驗證用戶名
  function checkUser(){
      var $user = $("#user");
      var $divID = $("#DivUser");
      $divID.html("");
      if($user.val()==""){
          $divID.html("姓名不能為空");
          return false;
          }
      for(var i = 0; i < $user.val().length; i++){
          var j = $user.val().substring(i,i+1)
          if(j>=0){
              $divID.html("姓名中不能包含數(shù)字");
              return false;
              }
          }
      return true;
      }
</script>

</head>

   2.CSS文件

*{padding:0; margin:0;}
body{
font-size:13px;
color:#000;
line-height:25px;
}
.main{
float:none;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
clear:both;
}

header{

background-image: url(../images/bg.gif);
background-repeat: repeat-x;
height: 36px;

}

headerLeft{width:200px;

float:left;

}

headerRight{width:160px;

float:right;
color:#FFF;

}

center{

margin-top: 20px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
width:100%;

}
.register{margin: 0 auto; width: 500px; clear: both;}
.register dl dt{width:30%;
text-align:right;
height:25px;
float: left;
}
.register dl dd img{vertical-align: middle;}

.bg{
background-image: url(../images/dl_l_bg.gif);
background-repeat: repeat-y;
}
.inputs{width:150px;
height:16px;
border:solid 1px #666666;

}
.register dl dd span{
color:#F00;
padding-left:5px;
}
.bold{
font-size:18px;
font-weight:bold;
text-align:center;
line-height:35px;
height:35px;
}
.rb1{
height:20px;
color:#fff;
font-size:13px;
background:#d32c47;
padding:3px 10px;
border-left:1px solid #fff;
border-top:1px solid #fff;
border-right:1px solid #6a6a6a;
border-bottom:1px solid #6a6a6a;
cursor:pointer;
}

footer{text-align:center;

color:#333;
line-height:35px;

}

footer a{

color:#333;
text-decoration:underline;

}

footer hover{

color:#333;
text-decoration:none;

}

fileImgHeader,#imgHeader{ margin-right: 5px;

float: left;}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市珍手,隨后出現(xiàn)的幾起案子办铡,更是在濱河造成了極大的恐慌辞做,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,126評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件寡具,死亡現(xiàn)場離奇詭異秤茅,居然都是意外死亡,警方通過查閱死者的電腦和手機童叠,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,254評論 2 382
  • 文/潘曉璐 我一進店門框喳,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人厦坛,你說我怎么就攤上這事帖努。” “怎么了粪般?”我有些...
    開封第一講書人閱讀 152,445評論 0 341
  • 文/不壞的土叔 我叫張陵拼余,是天一觀的道長。 經(jīng)常有香客問我亩歹,道長匙监,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,185評論 1 278
  • 正文 為了忘掉前任小作,我火速辦了婚禮亭姥,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘顾稀。我一直安慰自己达罗,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 64,178評論 5 371
  • 文/花漫 我一把揭開白布静秆。 她就那樣靜靜地躺著粮揉,像睡著了一般。 火紅的嫁衣襯著肌膚如雪抚笔。 梳的紋絲不亂的頭發(fā)上扶认,一...
    開封第一講書人閱讀 48,970評論 1 284
  • 那天,我揣著相機與錄音殊橙,去河邊找鬼辐宾。 笑死,一個胖子當(dāng)著我的面吹牛膨蛮,可吹牛的內(nèi)容都是我干的叠纹。 我是一名探鬼主播,決...
    沈念sama閱讀 38,276評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼敞葛,長吁一口氣:“原來是場噩夢啊……” “哼誉察!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起制肮,我...
    開封第一講書人閱讀 36,927評論 0 259
  • 序言:老撾萬榮一對情侶失蹤冒窍,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后豺鼻,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體综液,經(jīng)...
    沈念sama閱讀 43,400評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,883評論 2 323
  • 正文 我和宋清朗相戀三年儒飒,在試婚紗的時候發(fā)現(xiàn)自己被綠了谬莹。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 37,997評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡桩了,死狀恐怖附帽,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情井誉,我是刑警寧澤蕉扮,帶...
    沈念sama閱讀 33,646評論 4 322
  • 正文 年R本政府宣布,位于F島的核電站颗圣,受9級特大地震影響喳钟,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜在岂,卻給世界環(huán)境...
    茶點故事閱讀 39,213評論 3 307
  • 文/蒙蒙 一奔则、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧蔽午,春花似錦易茬、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,204評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至骄恶,卻和暖如春岸蜗,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背叠蝇。 一陣腳步聲響...
    開封第一講書人閱讀 31,423評論 1 260
  • 我被黑心中介騙來泰國打工璃岳, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留笋鄙,地道東北人掉弛。 一個月前我還...
    沈念sama閱讀 45,423評論 2 352
  • 正文 我出身青樓,卻偏偏與公主長得像展姐,于是被迫代替她去往敵國和親蜕该。 傳聞我的和親對象是個殘疾皇子犁柜,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,722評論 2 345

推薦閱讀更多精彩內(nèi)容