一个Web开发的客户端基础技术测试Demo

最近参加了一个Web开发的客户端基础技术测试，虽然对于做前台开发的程序员来说比较简单，但对于一直做后台代码编写的程序员想掌握前台开发的基础来说，应该是一个比较好的Demo。对于Web初学者来说，也是一个概括比较全的示例。

先看看具体要求，这里直接把测试要求发了上来。需要注意的是，不能使用Dreamware或者Visual Studio智能工具，最好使用记事本纯手工编写，最多使用EditPlus辅助一下。

WEB开发的客户端基础技术测试要求
WEB开发的客户端基础技术测试

知识技能主要涉及:HTML[50分] , CSS[20分] , JAVASCRIPT[30分]
*************************************************************************
请纯手工编写一个HTML页面,
实现会员注册资料填写的界面,
并用CSS控制其页面元素的外观,
使用JavaScript在表单提交前进行表单数据有效性验证.
*************************************************************************

具体要求如下:
页面文件名:UserReg.htm

[HTML:5分]
整个页面或页面局部使用表格进行布局

[HTML:30分]
对注册表单的要求:

注册项目        表单元素            有效性要求

用户名        文本框            非空,不少于八位字符
密码        密码框            非空,不少于八位字符,不得为纯数字字符
确认密码        密码框        与密码一致
性别        单选按钮[一组两个]        必须选择其中之一
婚否        复选框            无
年龄        列表框            必须提供
职业        可多选的列表框        无
相片        文件选择上传按钮        相片文件必须是JPG图片*.jpg
个性签名    多行文本框        不超过200个字符

职业列表框中的选项请自行设计,但至少提供五项.

[HTML:10分]
表单内应该提供
[确认注册]提交按钮
[重新填写]重置按钮
[关闭窗口]命令按钮

[HTML:5分]
表单之外,放置一个超链接,文本为登录 ,指向UserLogin.htm页面.
另一超链接,文本为返回首页 ,指向Index.htm页面

CSS样式应用的要求:

[CSS:5分]
为所有文本输入的表单元素[含文本框,密码框,多行文本框]定义一个类选择器 ,并应用.
要求:边框为1像素的绿色细线边框,文本颜色为蓝色.

[CSS:5分]
为所有的按钮[含提交,重置和命令按钮]定义一个类选择器 ,并应用.
要求:边框为1像素的蓝色细线边框,文本颜色为白色,文本加粗,背景颜色为#abcdef.

[CSS:5分]
使用HTML标记选择器以及锚伪类选择器,对页面内所有的超链接进行外观控制.
要求 :
超链接的文字字号为14px
仅在鼠标悬停状态时才有下划线,其它状态时没有下划线.
访问过的超链接有灰色边框.

[CSS:5分]
适当使用样式表,对整个页面,表格及内部的行,单元格进行外观控制.
页面的普通文字大小为14px,字体为宋体
注册项目提示的文字字号为16px加粗显示,表单元素有效性验证的提示文本字号12px倾斜显示,
且为红色.

JAVASCRIPT应用的要求:

[JAVASCRIPT:10分]
年龄列表框中的选项包含从18岁到60岁的年龄,使用脚本动态生成.

其中
[JAVASCRIPT:15分]
提交按钮被点击后,进行表单数据有效性验证,
如果有效性规则验证通过,则表单以POST方式提交到DoReg.htm页面;
如果有一项或多项规则未通过,则使用对话框警告用户,并阻止提交.

重置按钮被点击后 ,表单数据应该恢复到初始状态.

[JAVASCRIPT:5分]
关闭按钮被点击后,页面所在的浏览器窗口应关闭.

其它的要求:
[5分]
如果代码格式良好,命名规范,有适当的注释,则额外加5分.

下面是我所完成的一个效果：

下面是我的实现代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

/* input 的设置 */

.myText{ border-width:1px; border-color:green; color:blue}

/* input 的 Button 设置 */

.myButton{ border-width:1px; border-color:blue; color:white; font-weight:bold; background-color:"#abcdef" }

/* 表格的标题 Caption 设置 */

.myCaption{ font-size:25px; font-family:"宋体"; font-weight:bold; }

/* Table 的设置 */

.myTable{ font-size:14px; font-family:"宋体"; border-style:double; border-width:4px; border-color:black;}

/* 标题文本的设置 */

.myTitle{ font-size:16px; font-weight:bolder;background-color="#fedcba" }

/* 提示文本的设置 */

.myReg{ font-size:12px; font-style:italic; color:red;}

/* HTML标识的设置 */

a{ font-size:14px; text-decoration:underline;}

/* 锚伪类的设置 */

a:link{text-decoration:none;} /* 去掉下划线 -普通状态，没有任何操作- */

a:visited{border:1px solid #999999;} /* border相关的3个属性的设置 -使用后的状态- */

a:hover{} /* -鼠标悬停状态- */

a:active{border-color:gray;} /* -鼠标点击后的状态- */

</style>

function myRusult()

{

// 判断用户名的格式

var user = document.getElementById("userName").value; // 根据 ID 获取文本 innerText

//var user = document.form.userName.value; // 根据 name 获取文本

if( user.length < 8 )

{

window.alert("用户名长度小于8位!");

return false;

}

// 判断密码的格式

var psw = document.form.passWord.value;

if( psw.length < 8 || isNaN(psw)==false )

{

window.alert("密码长度不能小于8位，并且不能全部为数字!");

return false;

}

// 判断重复密码的格式

var repsw = document.form.repassword.value;

if( repsw != psw)

{

window.alert("密码不一致!");

return false;

}

// 判断性别的格式

var subject = "";

for( var i=0; i<document.form.sex.length; i++)

{

if(document.form.sex[i].checked)

{

subject = document.form.sex[i].value;

break;

}

if( subject == "")

{

window.alert("请选择性别!");

return false;

}

// 判断年龄的格式

var index = document.form.age.selectedIndex;

var uage = document.form.age.options[index].value;

if( uage == "")

{

window.alert("请选择年龄!");

return false;

}

// 职业的选择累加

var jobs = "";

for(var i=0;i<document.form.selectJob.options.length;i++)

{

if(document.form.selectJob.options[i].selected ==true)

{

jobs += document.form.selectJob.options[i].text; //text 取出其文本,也可以取value

}

if(jobs == "")

{

window.alert("请选择职业!");

return false;

}

// 判断是否上传的是*.jpg的图片

var myFile = document.form.File.value;

var str = myFile.substr( myFile.lastIndexOf(".") + 1);

if( str.toLowerCase() != "jpg" )

{

window.alert("上传的文件必需是*.jpg的文件!");

document.form.File.focus();

return false;

}

// 判断个性签名是否在500个字符内

var myTextarea = document.form.qianming.value;

if(myTextarea.length > 200)

{

window.alert("个性签名不能大于200个字符!");

document.form.qianming.focus();

return false;

}

return true;

}

function myClose()

{

if(confirm("是否关闭窗口？"))

{

window.opener = null;

window.close();

}

</script>

</HEAD>

<BODY>

</p>

<caption align="top" class="myCaption">填写会员注册资料</caption>

<tr>

<td class="myReg">非空,不少于八位字符</td>

</tr>

<tr>

<td class="myReg">非空,不少于八位字符,不得为纯数字字符</td>

</tr>

<tr>

<td class="myReg">与密码一致</td>

</tr>

<tr>

<td><input type="radio" name="sex" value="man" >男

<input type="radio" name="sex" value="woman" >女

</td>

<td class="myReg">必须选择其中之一</td>

</tr>

<tr>

</tr>

<tr>

for(var i=18;i<61;i++)

{

document.write("<option value='"+ i +"'>"+ i +"岁</option>");

}

</script>

</select>

</td>

</tr>

<tr>

<td>

</select>

</td>

</tr>

<tr>

</td>

<td class="myReg">相片文件必须是JPG图片*.jpg</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

</Table>

<form>

</BODY>

</HTML>

XuGang

一个Web开发的客户端基础技术测试Demo

导航

公告