驗證用戶是否修改過頁面的數據的實現方法
2019-11-21 01:37:10
供稿：網友
起因：
在實現程序的修改模塊時，要在頁面端檢查用戶是否修改過數據，以便提醒用戶及時保存修改后的數據。
實現要求：
判斷用戶是否修改了輸入的內容，要能判斷input中的checkbox，text，radio等，不知道會多少個input，也不知道input的ID和name，要在客戶端判斷是否修改，不能產生提交。還要同時滿足IE和firefox兩種環境。也要支持master和content頁的使用。
解決方案；
處理思路：在頁面加載時記錄所有的input的值或狀態，如果要求在用戶進行修改操作時立即調整控件狀態，則在數據區div上的onclick和onkeypress事件里調用檢查數據是否改變的函數，并設置相應控件的狀態（用ha_setch())。如果是在提交或用戶手動控制檢查過程時，則在相應的操作事件中調用檢查數據是否改變（例在button的onclick()中使用ha_checkin()控制提交)。
以下是實現代碼
var ha_last=new Array;//定義一個全局的空對象，存放所有的初始值。
function ha_get()//讀取初始值
{ var ha_input = document.getElementsByTagName("input");
for (var i=0;i<ha_input.length;i++)
{
if (ha_input[i].type=="password"){ ha_last.push(ha_input[i].value);}//根本頁面需要設置type的值和對象屬性
if (ha_input[i].type=="radio") {ha_last.push(ha_input[i].checked);}//要保證檢查的范圍是否準確
}
}
window.onload=ha_get;//綁定讀取初始值的函數
function ha_checkin()//檢查新的輸入值和初始值是否相等。返回判斷結果。true為沒有發生修改，false為有修改。
{ var ha_now=new Array;
var ha_input = document.getElementsByTagName("input");
for (var i=0;i<ha_input.length;i++)
{
if (ha_input[i].type=="password"){ ha_now.push(ha_input[i].value);}//根本頁面需要設置type的值和對象屬性。
if (ha_input[i].type=="radio") {ha_now.push(ha_input[i].checked);}//也要保證和ha_get()中檢查的標簽相一致
}
if (ha_now.toString()==ha_last.toString())//沒修改
{return true;}
else//有修改
{return false;}
}
function ha_setch(){//設置相應的控件狀態
if (ha_checkin())//沒有變化
//改變控件的顯示和功能狀態
else//有變化
//改變控件的顯示和功能狀態
}
注：以上解決方案只在IE6和firefox3.0。2中測試并通過。沒有在其它的瀏覽器中測試。
