2019-11-21

一、
任务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" />阅读贵美网服务协议 </h4>
<textarea id="textarea" cols="30" rows="15">欢迎阅读服务条款协议，本协议阐述之条款和条件适用于您使用Gmgw.com网站的各种工具和服务。
本服务协议双方为贵美与贵美网用户，本服务协议具有合同效力。
贵美的权利和义务
1.贵美有义务在现有技术上维护整个网上交易平台的正常运行，并努力提升和改进技术，使用户网上交易活动的顺利。
2.对用户在注册使用贵美网上交易平台中所遇到的与交易或注册有关的问题及反映的情况，贵美应及时作出回复。
3.对于在贵美网网上交易平台上的不当行为或其它任何贵美认为应当终止服务的情况，贵美有权随时作出删除相关信息、终止服务提供等处理，而无须征得用户的同意。
4.因网上交易平台的特殊性，贵美没有义务对所有用户的注册资料、所有的交易行为以及与交易有关的其他事项进行事先审查。
</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到服务热线/

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;

}

/右上方菜单 购物车 帮助中心 加入收藏 设为首页等，.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上网本）/

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{/设置无下划线、文字背景超连接样式/

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;}

/对联广告 两边主图片层和关闭图片层/

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）任务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">注册休闲网</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="#">关于我们</a> | <a href="#">诚聘英才</a> |<a href="#"> 联系方式</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);
      //提交表单，调用验证函数
      $("#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;
      }
  //验证重复密码
  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("姓名中不能包含数字");
              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;}
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 199,271评论 5赞 466
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 83,725评论 2赞 376
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 146,252评论 0赞 328
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 53,634评论 1赞 270
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 62,549评论 5赞 359
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 47,985评论 1赞 275
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,471评论 3赞 390
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,128评论 0赞 254
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,257评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,233评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,235评论 1赞 328
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,940评论 3赞 316
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,528评论 3赞 302
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,623评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,858评论 1赞 255
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,245评论 2赞 344
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 41,790评论 2赞 339

推荐阅读更多精彩内容