驗證用戶是否修改過頁面的數(shù)據(jù)的實現(xiàn)方法
更新時間:2008年09月26日 08:09:51 作者:
在實現(xiàn)程序的修改模塊時,要在頁面端檢查用戶是否修改過數(shù)據(jù),以便提醒用戶及時保存修改后的數(shù)據(jù)。
起因:
在實現(xiàn)程序的修改模塊時,要在頁面端檢查用戶是否修改過數(shù)據(jù),以便提醒用戶及時保存修改后的數(shù)據(jù)。
實現(xiàn)要求:
判斷用戶是否修改了輸入的內(nèi)容,要能判斷input中的checkbox,text,radio等,不知道會多少個input,也不知道input的ID和name,要在客戶端判斷是否修改,不能產(chǎn)生提交。還要同時滿足IE和firefox兩種環(huán)境。也要支持master和content頁的使用。
解決方案;
處理思路:在頁面加載時記錄所有的input的值或狀態(tài),如果要求在用戶進行修改操作時立即調(diào)整控件狀態(tài),則在數(shù)據(jù)區(qū)div上的onclick和onkeypress事件里調(diào)用檢查數(shù)據(jù)是否改變的函數(shù),并設置相應控件的狀態(tài)(用ha_setch())。如果是在提交或用戶手動控制檢查過程時,則在相應的操作事件中調(diào)用檢查數(shù)據(jù)是否改變(例在button的onclick()中使用ha_checkin()控制提交)。
以下是實現(xiàn)代碼
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;//綁定讀取初始值的函數(shù)
function ha_checkin()//檢查新的輸入值和初始值是否相等。返回判斷結(jié)果。true為沒有發(fā)生修改,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(){//設置相應的控件狀態(tài)
if (ha_checkin())//沒有變化
//改變控件的顯示和功能狀態(tài)
else//有變化
//改變控件的顯示和功能狀態(tài)
}
注:以上解決方案只在IE6和firefox3.0。2中測試并通過。沒有在其它的瀏覽器中測試。
在實現(xiàn)程序的修改模塊時,要在頁面端檢查用戶是否修改過數(shù)據(jù),以便提醒用戶及時保存修改后的數(shù)據(jù)。
實現(xiàn)要求:
判斷用戶是否修改了輸入的內(nèi)容,要能判斷input中的checkbox,text,radio等,不知道會多少個input,也不知道input的ID和name,要在客戶端判斷是否修改,不能產(chǎn)生提交。還要同時滿足IE和firefox兩種環(huán)境。也要支持master和content頁的使用。
解決方案;
處理思路:在頁面加載時記錄所有的input的值或狀態(tài),如果要求在用戶進行修改操作時立即調(diào)整控件狀態(tài),則在數(shù)據(jù)區(qū)div上的onclick和onkeypress事件里調(diào)用檢查數(shù)據(jù)是否改變的函數(shù),并設置相應控件的狀態(tài)(用ha_setch())。如果是在提交或用戶手動控制檢查過程時,則在相應的操作事件中調(diào)用檢查數(shù)據(jù)是否改變(例在button的onclick()中使用ha_checkin()控制提交)。
以下是實現(xiàn)代碼
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;//綁定讀取初始值的函數(shù)
function ha_checkin()//檢查新的輸入值和初始值是否相等。返回判斷結(jié)果。true為沒有發(fā)生修改,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(){//設置相應的控件狀態(tài)
if (ha_checkin())//沒有變化
//改變控件的顯示和功能狀態(tài)
else//有變化
//改變控件的顯示和功能狀態(tài)
}
注:以上解決方案只在IE6和firefox3.0。2中測試并通過。沒有在其它的瀏覽器中測試。
相關文章
基于JavaScript如何實現(xiàn)私有成員的語法特征及私有成員的實現(xiàn)方式
本文給大家介紹基于JavaScript如何實現(xiàn)私有成員的語法特征及私有成員的實現(xiàn)方式,涉及到javascript語法特征相關知識,對本文感興趣的朋友快來一起學習吧2015-10-10
JavaScript仿商城實現(xiàn)圖片廣告輪播實例代碼
大家在逛購物商城的時候不知道有沒有注意到商城首頁上面都會有各種輪播廣告,效果非常好,下面小編給大家整理特此分享給大家學習2016-02-02
js遍歷詳解(forEach, map, for, for...in, for...of)
在本篇文章里小編給大家整理的是關于js中的各種遍歷(forEach, map, for, for...in, for...of)相關知識點用法總結(jié),需要的朋友們參考下。2019-08-08
undefined==null引發(fā)的兩者區(qū)別與聯(lián)系
undefined==null引發(fā)的兩者區(qū)別與聯(lián)系2007-12-12
JS將網(wǎng)址url轉(zhuǎn)化為JSON格式的方法
這篇文章主要介紹了JS將網(wǎng)址url轉(zhuǎn)化為JSON格式的方法,需要的朋友可以參考下2018-07-07

