最近参加了一个Web开发的客户端基础技术测试,虽然对于做前台开发的程序员来说比较简单,但对于一直做后台代码编写的程序员想掌握前台开发的基础来说,应该是一个比较好的Demo。对于Web初学者来说,也是一个概括比较全的示例。
先看看具体要求,这里直接把测试要求发了上来。需要注意的是,不能使用Dreamware或者Visual Studio智能工具,最好使用记事本纯手工编写,最多使用EditPlus辅助一下。
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
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分.
下面是我所完成的一个效果:
![](https://www.cnblogs.com/images/cnblogs_com/xugang/html_demo.JPG)
下面是我的实现代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 用户注册 </TITLE>
<META http-equiv="Content-Type" content="text/html; charset=gb2312" />
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<!-- <LINK rel="stylesheet" type="text/css" href="style/style.css"> -->
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<style type="text/css">
/**//* CSS 的设置 */
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**//* input 的设置 */
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
.myText{
}{ border-width:1px; border-color:green; color:blue}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**//* input 的 Button 设置 */
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
.myButton{
}{ border-width:1px; border-color:blue; color:white; font-weight:bold; background-color:"#abcdef" }
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**//* 表格的标题 Caption 设置 */
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
.myCaption{
}{ font-size:25px; font-family:"宋体"; font-weight:bold; }
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**//* Table 的设置 */
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
.myTable{
}{ font-size:14px; font-family:"宋体"; border-style:double; border-width:4px; border-color:black;}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**//* 标题文本的设置 */
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
.myTitle{
}{ font-size:16px; font-weight:bolder;background-color="#fedcba" }
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**//* 提示文本的设置 */
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
.myReg{
}{ font-size:12px; font-style:italic; color:red;}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**//* HTML标识的设置 */
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
a{
}{ font-size:14px; text-decoration:underline;}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**//* 锚伪类的设置 */
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
a:link{
}{text-decoration:none;} /**//* 去掉下划线 -普通状态,没有任何操作- */
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
a:visited{
}{border:1px solid #999999;} /**//* border相关的3个属性的设置 -使用后的状态- */
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
a:hover{
}{} /**//* -鼠标悬停状态- */
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
a:active{
}{border-color:gray;} /**//* -鼠标点击后的状态- */
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
</style>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<!-- <script src="test.js" ></script> -->
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<script language="JavaScript">
/**//* JavaScript 的设置 */
function myRusult()
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
// 判断用户名的格式
var user = document.getElementById("userName").value; // 根据 ID 获取文本 innerText
//var user = document.form.userName.value; // 根据 name 获取文本
if( user.length < 8 )
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
window.alert("用户名长度小于8位!");
return false;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
// 判断密码的格式
var psw = document.form.passWord.value;
if( psw.length < 8 || isNaN(psw)==false )
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
window.alert("密码长度不能小于8位,并且不能全部为数字!");
return false;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
// 判断重复密码的格式
var repsw = document.form.repassword.value;
if( repsw != psw)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
window.alert("密码不一致!");
return false;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
// 判断性别的格式
var subject = "";
for( var i=0; i<document.form.sex.length; i++)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
if(document.form.sex[i].checked)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
subject = document.form.sex[i].value;
break;
}
}
if( subject == "")
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
window.alert("请选择性别!");
return false;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
// 判断年龄的格式
var index = document.form.age.selectedIndex;
var uage = document.form.age.options[index].value;
if( uage == "")
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
window.alert("请选择年龄!");
return false;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
// 职业的选择累加
var jobs = "";
for(var i=0;i<document.form.selectJob.options.length;i++)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
if(document.form.selectJob.options[i].selected ==true)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
jobs += document.form.selectJob.options[i].text; //text 取出其文本,也可以取value
}
}
if(jobs == "")
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
window.alert("请选择职业!");
return false;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
// 判断是否上传的是*.jpg的图片
var myFile = document.form.File.value;
var str = myFile.substr( myFile.lastIndexOf(".") + 1);
if( str.toLowerCase() != "jpg" )
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
window.alert("上传的文件必需是*.jpg的文件!");
document.form.File.focus();
return false;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
// 判断个性签名是否在500个字符内
var myTextarea = document.form.qianming.value;
if(myTextarea.length > 200)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
window.alert("个性签名不能大于200个字符!");
document.form.qianming.focus();
return false;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
return true;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
function myClose()
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
if(confirm("是否关闭窗口?"))
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
window.opener = null;
window.close();
}
}
</script>
</HEAD>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<BODY>
<p align="center">
<a href="Index.htm">返回首页</a>
<a href="UserLogin.htm">登录</a>
</p>
<form method="post" name="form" onSubmit="return myRusult();" action="DoReg.htm">
<Table border="1px" cellspacing="0" align="center" class="myTable">
<caption align="top" class="myCaption">填写会员注册资料</caption>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<tr>
<!-- HTML中的颜色设置 bgcolor="#CBCBCB" -->
<td class="myTitle">用户名:</td>
<td><input type="text" name="userName" id="userName" value="" class="myText"></input></td>
<td class="myReg">非空,不少于八位字符</td>
</tr>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<tr>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<td class="myTitle" >密码:</td>
<td><input type="password" name="passWord" value="" class="myText"></td>
<td class="myReg">非空,不少于八位字符,不得为纯数字字符</td>
</tr>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<tr>
<td class="myTitle">确认密码:</td>
<td><input type="password" name="repassword" value="" class="myText"></td>
<td class="myReg">与密码一致</td>
</tr>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<tr>
<td class="myTitle">性别:</td>
<td><input type="radio" name="sex" value="man" >男
<input type="radio" name="sex" value="woman" >女
</td>
<td class="myReg">必须选择其中之一</td>
</tr>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<tr>
<td class="myTitle">婚否:</td>
<td><input type="checkbox" name="hun" value="hun"></td>
<td> </td>
</tr>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<tr>
<td class="myTitle">年龄:</td>
<td><select name="age">
<option value=""> ------- </option>
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<script>![](https://www.cnblogs.com/Images/dot.gif)
for(var i=18;i<61;i++)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
document.write("<option value='"+ i +"'>"+ i +"岁</option>");
}
</script>
</select>
</td>
<td class="myReg">必须提供</td>
</tr>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<tr>
<td class="myTitle">职业:</td>
<td>
<select name="selectJob" value="selectJob" multiple="true" >
<option >人事管理</option>
<option >电脑相关</option>
<option >金融相关</option>
<option >物流管理</option>
<option >教育事业</option>
</select>
</td>
<td> </td>
</tr>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<tr>
<td class="myTitle">相片:</td>
<td><INPUT type="file" name="File" id="File" class="myText">
</td>
<td class="myReg">相片文件必须是JPG图片*.jpg</td>
</tr>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<tr>
<td class="myTitle">个性签名:</td>
<td>
<textarea name="qianming" cols="20" rows="5" class="myText"></textarea>
</td>
<td class="myReg">不超过200个字符</td>
</tr>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<tr>
<td class="myTitle"> </td>
<td>
<input type="submit" name="submit" value="确认注册" class="myButton"></input>
<input type="reset" name="reset" value="重新填写" class="myButton"></input>
<input type="button" name="btnClose" value="关闭窗口" class="myButton" onclick="myClose();" href=""></input>
</td>
<td> </td>
</tr>
</Table>
<form>
</BODY>
</HTML>
相关说明:
为了简单起见,我将Javascript 和CSS 都集成到HTML 当中来了。在实际的开发中,建议还是将他们分别用单独的文件存放,再在HTML 中引用进来。
CSS 的外部引用:
在HTML的<head>中添加<link rel="stylesheet" type="text/css" href="style.css">,然后把CSS 写在style.css文件中即可。
Javascript 的外部引用:
在HTML的<head>中添加<script type="text/javascript" src="Queue.js"></script>,然后把Javascript 写在Queue.js文件中即可。
也可以动态加载JS脚本(参考):
动态加载JS脚本的4种方法
如何在HTML文件中正确的引用js文件中的函数
另外,为了阅读的方便,我在代码中添加了许多的注释。关于注释,在HTML、Javascript 和CSS 中都有所差异:
HTML 中使用: <!-- HTML的注释 -->
Javascript 中使用: /* JavaScript的注释 */ 和 // JavaScript的注释
CSS 中使用: /* CSS的注释 */
( 关于HTML、Javascript 和CSS 的注释是我在应用后的总结,错漏之处还请斧正!)
示例下载