當柳上原的風吹向天際的時候...

真正的快樂來源于創造

BlogJava :: 首頁 :: 聯系 :: 聚合

:: 管理

368 Posts :: 1 Stories :: 201 Comments :: 0 Trackbacks

使用類化的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>

posted on 2009-06-19 07:49 何楊閱讀(571) 評論(0) 編輯收藏

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理

當柳上原的風吹向天際的時候...

公告

常用鏈接

留言簿(3)

隨筆分類

相冊

個人常用鏈接

最新隨筆

積分與排名

最新評論

閱讀排行榜