在網頁上驗證不同的控件

Question

我有一個網頁有40個奇怪的控件，如文本框，單選按鈕，複選框，下拉列表。我必須實現一種場景，如果用戶更改了任何控件的狀態並希望從頁面導航而不保存它，則應用程序必須彈出一個窗口。

我明白，這需要在客戶端完成，但這裏的問題是如何檢查哪40個奇怪的控制已被更改。所有這些字段不一定是強制性的。

Answer 1

您可以在頁面加載時保存其值，然後在發送表單時將這些值與當前值進行比較。

此示例警報改變控件的ID：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.inputToCheck').each(function() { 
      $(this).data("oldValue", $(this).val()) 
     }); 

     $('#btn').click(function() { 
      $('.inputToCheck').each(function() { 
       if ($(this).data("oldValue") != $(this).val()) 
        alert($(this).attr('id')); 
      }); 
     }); 
    }); 
</script> 

<input type="text" id="txt1" class="inputToCheck" value="10" /> 
<input type="text" id="txt2" class="inputToCheck" value="20" /> 
<input type="text" id="txt3" class="inputToCheck" value="30" /> 
<input type="button" id="btn" value="send" />