檢查表單元素的值是否為空

1.概述

     在實際的開發過程中，經常需要判斷用戶提交的表單中某個元素的值是否為空，還有一種情況是表單中所有元素的值都不允許為空。本實例將介紹一種簡單有效的判斷表單中所有元素是否為空的方法。

 

2.技術要點

     主要是在JavaScript中通過循環form對象的elements屬性來實現。form對象的elements屬性也就是頁面中form表單的所有元素的數組，例如，form.elements[0]表示表單第一個元素對象，form.elements[n]表示表單第n個元素對象。

 

3.具體實現代碼

（1）新建index.jsp表單頁，該頁的表單中包含3個不允許為空的元素和一個提交按鈕，並且需要定義一個表單的id屬性值，關鍵代碼如下：

<form action="" id="myform">
   <table align="center">
          <tr>
                <td>留言人：</td>
                <td>
                      <input type="text" name="messageUser" title="留言人">     
                </td>
          </tr>
          <tr>
                <td>留言標題：</td>
                <td>
                      <input type="text" name="messageTitle" title="留言標題">                      
                </td>
          </tr>
          <tr>
                <td>留言內容：</td>
                <td>
                      <textarea rows="8" cols="45" title="留言內容"></textarea>
                </td>
          </tr>
          <tr>
                <td align="center" colspan="2">
                      <input type="button" value="提 交" onclick="check()">
                </td>
          </tr>
   </table>
</form>

（2）在該頁的<script>標簽中編寫驗證表單元素的值不允許為空的方法，關鍵代碼如下：

   function check(){
            var myform = document.getElementById("myform");   //獲得form表單對象
            for(var i=0;i<myform.length;i++){               //循環form表單
                  if(myform.elements[i].value==""){          //判斷每一個元素是否為空
                        alert(myform.elements[i].title+"不能為空！");
                        myform.elements[i].focus();             //元素獲得焦點
                        return ;
                  }
            }
            myform.submit();
      }

在JavaScript中，form表單對象的elements屬性的value屬性表示指定元素的值；name屬性表示指定表單元素的名稱；title屬性表示表單元素的標題。