任务2-1 建立有验证的登录界面
需求：
建立一个如图2-1所示的登录界面，保证用户名和密码都有非空（或全空格）的输入。
分析：
用JavaScript脚本读取客户端文本框的值并进行判断，用户名和密码为空时，产生提示，并返回false，不产生提交。
实现：
第一步，新建一个页面，在页面上添加一个DIV，选择一个如图2-2所示的图片作为登录界面背景图片。
图2-1 登录界面
图2-2 登录界面窗口
第二步，在界面上新建四个DIV，其作用分别为：顶级区域、登录界面区域、标题区域、内容区域。
其中顶级区域包容了登录界面区域，用于控制其内容的字体大小为12px；登录界面区域包容了标题区域和内容区域，用于设置登录界面的背景图片。其代码如清单2-1所示，设计界面如图2-3所示。
图2-3 添加了标题和内容区域的登录界面窗口
清单2-1 登录界面区域及其标题区域和内容区域的定义
注：设置了style="position： absolute"的DIV可以在“设计”选项卡中进行自由拖放以设置区域位置和大小属性。
第三步，为使登录界面中的文字与控件对齐，在内容区域删除文字“内容”，放入table，并设置其相应属性。其代码如清单2-2所示，设计界面如图2-4所示。
清单2-2 布局内容区域＜table＞标签的定义
第四步，在TABLE中输入文字和HTML控件（标签），拖放HTML控件（标签）和表格列，直至布局合适为止，产生界面如图2-5所示。
图2-4 内容区域中添加＜table＞标签
图2-5 ＜table＞标签中添加可见标签
所用HTML控件（标签）及其属性设置如清单2-3所示。
清单2-3 内容区域HTML控件（标签）及其属性设置
两个按钮相对表格单元水平靠右，它们的父级td标签添加如下相应样式属性设置style="text-align： right"。
第五步，实现用户名和密码的非空验证。
在submit按钮中添加一个属性设置onclick="return onSubmit（）"，即：
在＜head＞节中或在界面源代码的最后编写代码应完成以下几件事：
①由id获取HTML标签（或称控件）；
②由HTML标签访问其属性；
③由HTML标签其属性进行判断；
④未通过验证的，弹出消息框，提示相关出错信息；
⑤返回false，禁止提交到服务端。
源代码如清单2-4所示。
清单2-4 客户端提交函数的定义
说明
（1）要使用JavaScript必须使用script标签。
（2）Function定义了一个函数（或称方法），函数可以带有形参表。
Var是定义局部变量，在函数内部定义的，只在本函数内有效，而在函数外定义的则在多个函数中都有效。
（3）函数名和变量名是区分大小写的。
（4）“提交”按钮的单击事件引发了函数onSubmit的调用。
（5）“重置”按钮的单击事件不需要另外指定事件处理代码。
（6）在编写JavaScript脚本程序时，经常会发生错误。在没其他调试工具的情况下，根据其提供的出错信息及其所在行的行号，为了看清出错行的具体位置，将页面的源代码复制到VS 2013的文本文件中；使用Window函数alert（）可以显示你所关心的表达式信息，以帮助JavaScript脚本调试。