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

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

<!--  <LINK rel="stylesheet" type="text/css" href="style/style.css">  -->
< 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 src="test.js" ></script>  -->
< 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 >
       <!--  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 >

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