一、
任務(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">
("#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">
("#myform :text").focus(function(){
if((this).val("");
}
("#email").blur(function(){
var email = ("#DivEmail").html("<font color='red'>郵箱不能為空</font>");
("#DivEmail").html("<font color='red'>郵箱必須包含@</font>");
("#DivEmail").html("<font color='red'>郵箱必須包含.</font>");
("#DivEmail").html("");
}
})
(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;}