基于任务驱动模式的JavaScript程序设计案例教程 第8章

</div >
页面 CSS 内容如下：
body,dl,dt,dd,div,form {padding:0;margin:0;}
#header,#main {
w idth:650p x; margin:0 auto; } .bg{ ba ckg round- ima ge:ur l(. ./image s/registe r_bg.gif); ba ckg round- re pea t:no- re pea t; w idth:6px;
需求说明： (1) 验证用户输入内容的有效性。 (2) 文本框获得焦点时，提示文本框中应该输入的内容。 (3) 文本框失去焦点时，验证文本框中的内容，并提示 错误信息。
本实例运行后的页面效果如图8-1所示。
图8-1
页面 HTML 的内容如下：
<div
id="header"><img
src="images/register_logo.gif"
<dd><input name="sex" type="radio" value="" checked="checked"/>男<input name
="sex" type="radio" value="" /> 女 </d d>
</dl> <dl>
<dt> 真实姓 名：</dt> <dd><input type="text" id="realName" class="inputs" /></dd> </dl> <dl> <dt>昵称： </dt>
background-position:0px -18px;
} .bg_top{
border-top:solid 1px #666666; } .bg_end{
<dd><input type="text" id="email" class="inpu ts"
onfo cus="emailFocus()" onb lur
="emailBlur()" /></dd>
<div id="emailId"></div>
</dl>
<dl>
<dtBiblioteka </dt><dd><input
<dl> <dt> 通行证 用户名：</dt> <dd><input type="text" id="userName" class="inputs
userWidth" onfocus ="use rN ame Foc us() "
onblur="userNameBlur()" /> @</dd> <div id="userNameId"></div>
name="
"
type="image"
src =" ima ges/button. gif"/></dd>
</dl>
</fo rm>
</td>
<td class="bg_right"></td>
</tr> <tr>
<td class="bg bg_end_left"></td> <td class="bg_end"></td> <td class="bg bg_end_right"></td> </tr> </table>
<dt>关联手 机号：</dt>
<dd><input type="text" id="tel" class="inputs"
onfo cus="telFocus()" onblur
="telBlur()" /></dd>
<div id="telId"></div>
</dl>
<dl>
<dt>保密邮 箱：</dt>
<td class="bg bg_top_righ t"></td>
</tr>
<tr>
<td class="bg_left"></td>
<td class="content">
<form action="" method="post" name="myform" onsubmit="return checkForm()">
第8章 JavaScript综合应用实例
8.1 概述 8.2 完成新用户注册页面 8.3 实现商品金额自动计算功能 8.4 实现商品数量增加和减少功能 8.5 实现删除商品功能
8.1 概 述
掌握HTML、CSS与JavaScript的综合使用，并掌握 DIV+CSS的布局技巧。
8.2 完成新用户注册页面
alt="logo"/></div>
<div id="main">
<table width="100%" border="0" cellspacing="0" cellpadd ing ="0">
<tr>
<td class="bg bg_top_left"></td>
<td class="bg_top"></td>
</dl> <d l> <dt> 登录密 码：</dt>
<dd><input type="password" id="pwd" class="inputs" onfo cus="pwdFocus()" onblur
="pwdBlur( )"/></dd > <div id="pwdId"></div> </dl> <d l> <dt> 重复登 录密码：</dt> <dd><input type="password" id="repwd" class="inputs" onblur="r epw dBlur () "/></dd> <div id="repwdId"></div> </dl> <dl> <dt> 性别： </dt>
he ight:6 px; } .bg_top_left{
background-position:0px 0px; } .bg_top_right{
background-position:0px -6px; } . bg_end_ le ft{
background-position:0px -12px; } . bg_end_ right{
<dd><input typ e="text" id ="n ickName" class="inputs"
onfo cus
="nickNameFocus()"
onblur
="nickN ame Blur ()" /></dd>
<div id="nickNameId"></div >
</dl>
<dl>