一个Web开发的客户端基础技术测试Demo-优快云博客

本文介绍了一个简单的Web注册表单示例，通过HTML、CSS和JavaScript实现表单验证功能，包括用户名、密码、性别等字段的有效性检查。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

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

下面是我的实现代码：

<! 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 ="" >

< style type ="text/css" > /* CSS 的设置 */

/* 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 >

< script language ="JavaScript" > /* JavaScript 的设置 */

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 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 >

< tr >

< td class ="myTitle" >用户名： </ td >

< td >< input type ="text" name ="userName" id ="userName" value ="" class ="myText" ></ input ></ td >

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

</ tr >

< tr >

< td class ="myTitle" >密码： </ td >

< td >< input type ="password" name ="passWord" value ="" class ="myText" ></ td >

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

</ tr >

< tr >

< td class ="myTitle" >确认密码： </ td >

< td >< input type ="password" name ="repassword" value ="" class ="myText" ></ td >

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

</ tr >

< 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 >

< tr >

< td class ="myTitle" >婚否： </ td >

< td >< input type ="checkbox" name ="hun" value ="hun" ></ td >

< td > &nbsp </ td >

</ tr >

< tr >

< td class ="myTitle" >年龄： </ td >

< td >< select name ="age" >

< option value ="" > ------- </ option >

< script >

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

{

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

}

</ script >

</ select >

</ td >

< td class ="myReg" >必须提供 </ td >

</ tr >

< 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 > &nbsp </ td >

</ tr >

< tr >

< td class ="myTitle" >相片： </ td >

< td >< INPUT type ="file" name ="File" id ="File" class ="myText" >

</ td >

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

</ tr >

< tr >

< td class ="myTitle" >个性签名： </ td >

< td >

< textarea name ="qianming" cols ="20" rows ="5" class ="myText" ></ textarea >

</ td >

< td class ="myReg" >不超过200个字符 </ td >

</ tr >

< tr >

< td class ="myTitle" > &nbsp </ 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 > &nbsp </ td >

</ tr >

</ Table >

< form >

</ BODY >

</ HTML >