验证用户是否修改过页面的数据的实现方法


Posted in Javascript onSeptember 26, 2008

起因:

在实现程序的修改模块时,要在页面端检查用户是否修改过数据,以便提醒用户及时保存修改后的数据。

实现要求:

判断用户是否修改了输入的内容,要能判断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中测试并通过。没有在其它的浏览器中测试。

Javascript 相关文章推荐
基于Jquery制作的幻灯片图集效果打包下载
Feb 12 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
Jan 13 Javascript
JavaScript中合并数组的N种方法
Sep 16 Javascript
JavaScript中String.match()方法的使用详解
Jun 06 Javascript
javascript实现显示和隐藏div方法汇总
Aug 14 Javascript
JavaScript必知必会(六) delete in instanceof
Jun 08 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
Jun 13 Javascript
angular2 ng build部署后base文件路径问题详细解答
Jul 15 Javascript
bootstrap table表格客户端分页实例
Aug 07 Javascript
移动端触摸滑动插件swiper使用方法详解
Aug 11 Javascript
JS运动改变单物体透明度的方法分析
Jan 23 Javascript
搭建vue开发环境
Jul 19 Javascript
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
Sep 25 #Javascript
js每次Title显示不同的名言
Sep 25 #Javascript
Js动态创建div
Sep 25 #Javascript
自己开发Dojo的建议框架
Sep 24 #Javascript
Discuz! 6.1_jQuery兼容问题
Sep 23 #Javascript
javascript的trim,ltrim,rtrim自定义函数
Sep 21 #Javascript
javascript各种复制代码收集
Sep 20 #Javascript
You might like
php xml-rpc远程调用
2008/12/19 PHP
PHP unset函数原理及使用方法解析
2020/08/14 PHP
checkbox 多选框 联动实现代码
2008/10/22 Javascript
分享14个很酷的jQuery导航菜单插件
2011/04/25 Javascript
10款非常有用的 Ajax 插件分享
2012/03/14 Javascript
jquery中get和post的简单实例
2014/02/04 Javascript
node.js中的fs.chmod方法使用说明
2014/12/18 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
2015/09/14 Javascript
javascript实现无法关闭的弹框
2016/11/27 Javascript
vue+axios+element ui 实现全局loading加载示例
2018/09/11 Javascript
JS回调函数简单易懂的入门实例分析
2019/09/29 Javascript
微信小程序连续签到7天积分获得功能的示例代码
2020/08/20 Javascript
小程序点餐界面添加购物车左右摆动动画
2020/09/23 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
2020/11/06 Javascript
[02:08]我的刀塔不可能这么可爱 胡晓桃_1
2014/06/20 DOTA
python类参数self使用示例
2014/02/17 Python
理解Python中的With语句
2015/02/02 Python
python验证码识别的示例代码
2017/09/21 Python
快速了解Python开发中的cookie及简单代码示例
2018/01/17 Python
python对视频画框标记后保存的方法
2018/12/07 Python
pytorch 输出中间层特征的实例
2019/08/17 Python
python matplotlib 画dataframe的时间序列图实例
2019/11/20 Python
Python函数的定义方式与函数参数问题实例分析
2019/12/26 Python
基于virtualenv创建python虚拟环境过程图解
2020/03/30 Python
设置jupyter中DataFrame的显示限制方式
2020/04/12 Python
Pycharm修改python路径过程图解
2020/05/22 Python
css3闪亮进度条效果实现思路及代码
2013/04/17 HTML / CSS
英国IT硬件供应商,定制游戏PC:Mesh Computers
2019/03/28 全球购物
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/11/24 面试题
初中体育教学反思
2014/01/14 职场文书
优秀学生干部推荐材料
2014/02/03 职场文书
2014年超市工作总结
2014/11/19 职场文书
导游词之杭州西湖
2019/09/19 职场文书
授权协议书范本(3篇)
2019/10/15 职场文书
Python用tkinter实现自定义记事本的方法详解
2022/03/31 Python
【海涛解说】史上最给力比赛,挑战DOTA极限
2022/04/01 DOTA