当柳上原的风吹向天际的时候...

真正的快乐来源于创造

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 何杨阅读(569) 评论(0) 编辑收藏

新用户注册刷新评论列表


只有注册用户登录后才能发表评论。




网站导航: 博客园 IT新闻知识库 C++博客博问管理

当柳上原的风吹向天际的时候...

公告

常用链接

留言簿(3)

随笔分类

相册

个人常用链接

最新随笔

积分与排名

最新评论

阅读排行榜