使用类化的JavaScript取得表单信息及验证

对于Web前台编程，使用JavaScript从表单form中提取用户输入的信息及验证这些信息是一项日常任务，表单一般多包含文本框，单选框，下拉列表框，复选框，文本域等基本元素，如下所示：

下面是该页面的HTML代码：

表单信息提取对于文本框，文本域和下拉列表框并不麻烦，统一使用 $(id).value即可，主要的麻烦在于单选框，复选框的信息提取，如果我们将其单选框，复选框类化，将复杂的信息提取过程隐藏在函数内部，而后调用之则可大大减少重复劳动，取得一劳永逸之功效。

下面请看使用JS类化单选框，复选框的代码：

/* *******************************************
* 单选框类构造函数
******************************************** */
function RadioButton(name){
   this .name = name;
}

/* *******************************************
* 单选框类函数，用于取得用户的选择项
******************************************** */
RadioButton.prototype.getSelectedValue = function (){
   var arr = document.getElementsByTagName( " input " );

   for ( var i = 0 ;i < arr.length;i ++ ){
     if (arr[i].name == this .name && arr[i].checked){
       return arr[i].value;
    }
  }

   return null ;
}

/* **************************************************
* 复选框类构造函数
*************************************************** */
function CheckBoxButton(name){
   this .name = name;
}

/* **************************************************
* 复选框类函数，得到复选框的选择项,
*  返回值为用户选中的数组，返回空表示用户未选中选项
*************************************************** */
CheckBoxButton.prototype.getSelectedValues = function (){
   var arr = document.getElementsByTagName( " input " );
   var selectedArr = new Array;
   var index = 0 ;

   for ( var i = 0 ;i < arr.length;i ++ ){
     if (arr[i].name == this .name && arr[i].checked){
        selectedArr[index ++ ] = arr[i].value;
    }
  }

   return selectedArr;
}

有了两个类的帮助，提取单选框和复选框信息的复杂过程就被隐藏在了类内部，类的客户程序员只要知道这个类及其相关函数就可以了。

下面是从表单中提取信息及验证过程的JavaScript代码，信息整体也被类化了：

/* ********************************************************
* 用以缩短常用的document.getElementById
********************************************************* */
function $(id){
   return document.getElementById(id);
}

/* ********************************************************
* 在窗口载入时调用
********************************************************* */
window.onload = function (){

  $( " btn " ).onclick = function (){
     /* 创建雇员类的实例 */
     var emp = new Employee(
              $( " name " ).value,
               new RadioButton( " sex " ).getSelectedValue(),
              $( " nativePlace " ).value,
               new CheckBoxButton( " title " ).getSelectedValues(),
              $( " intro " ).value
             );

     /* 判断这个实例的合法性，如果合法则添加到表格中，不合法则显示错误信息提示用户 */
     if (emp.isValid() == true ){
         $( " personList " ).appendChild(emp.getInfoLine());

         $( " name " ).value = "" ;
         $( " intro " ).value = "" ;
         $( " errMsg " ).innerHTML = "" ;
    }
     else {
         $( " errMsg " ).innerHTML = emp.errMsg;
    }
  }
}

var sn = 0 ;
/* ********************************************************
* 雇员类的构造函数
********************************************************* */
function Employee(name,sex,nativePlace,titles,intro){
   this .name = name;
   this .sex = sex;
   this .nativePlace = nativePlace;

   this .title = "" ;
   for ( var i = 0 ;i < titles.length;i ++ ){
     this .title += titles[i] + " , " ;
  }

   this .intro = intro;
   this .errMsg = "" ;
}

/* ********************************************************
* 雇员类的函数，用以从属性中组合成一个表格行
********************************************************* */
Employee.prototype.getInfoLine = function (){
   var row = document.createElement( " tr " );
  row.setAttribute( " height " , 20 );

   var cell1 = document.createElement( " td " );
  cell1.appendChild(document.createTextNode( this .name));
  row.appendChild(cell1);

   var cell2 = document.createElement( " td " );
  cell2.appendChild(document.createTextNode( this .sex));
  row.appendChild(cell2);

   var cell3 = document.createElement( " td " );
  cell3.appendChild(document.createTextNode( this .nativePlace));
  row.appendChild(cell3);

   var cell4 = document.createElement( " td " );
  cell4.appendChild(document.createTextNode( this .title));
  row.appendChild(cell4);

   var cell5 = document.createElement( " td " );
  cell5.appendChild(document.createTextNode( this .intro));
  row.appendChild(cell5);

   return row;
}

/* ********************************************************
* 雇员类的函数，用以判断属性是否合法
********************************************************* */
Employee.prototype.isValid = function (){
     var name = this .name;

     if (name == "" ){
           this .errMsg = " 姓名不能为空 " ;
           return false ;
    }

     var titles = this .titles;

     if (titles == "" ){
           this .errMsg = " 职称至少要选择一项 " ;
           return false ;
    }

     return true ;
}

全部网页代码如下：

< html >
< head >
   < title > 表单控件数据取得及验证完整实例 </ title >
</ head >
   < body >
     < div >
     < table border ="1" class ="holder" cellspacing ="0" width ="100%" height ="20" >
       < caption > 雇员名单 </ caption >
       < tbody id ="personList" >
         < TR >
           < TH > 姓名 </ TH >
       < TH > 性别 </ TH >
       < TH > 籍贯 </ TH >
       < TH > 职位 </ TH >
       < TH > 简介 </ TH >
         </ TR >
       </ tbody >
     </ table >
     </ div >
     < hr />
     < div >
         < div >< font color =red >< span id ="errMsg" ></ span ></ font ></ div >
      姓名: < input type ="text" name ="name" />< br />
    性别: < input type ="radio" name ="sex" value ="男" checked /> 男/ < input type ="radio" name ="sex" value ="女" /> 女 < br />
    籍贯: < select name ="nativePlace" >
         < option value ="辽宁" > 辽宁 </ option >
         < option value ="北京" > 北京 </ option >
         < option value ="上海" > 上海 </ option >
         < option value ="湖南" selected > 湖南 </ option >
        </ select >< br />
    职位: < INPUT TYPE ="checkbox" NAME ="title" value ="程序员" > 程序员 </ input >
            < INPUT TYPE ="checkbox" NAME ="title" value ="高程" > 高程 </ input >
            < INPUT TYPE ="checkbox" NAME ="title" value ="TL" > TL </ input >
            < INPUT TYPE ="checkbox" NAME ="title" value ="PL" > PL </ input >
            < INPUT TYPE ="checkbox" NAME ="title" value ="GM" > GM </ input >< br />
      简介: < textarea name ="intro" rows ="10" cols ="40" ></ textarea >< br />
             < input type ="button" name ="btn" value ="提交" />< br />
     </ div >
   </ body >
</ html >

< script language ="javascript" >

</ script >

使用类化的JavaScript取得表单信息及验证

你可能感兴趣的:(使用类化的JavaScript取得表单信息及验证)