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


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 相关文章推荐
超酷的网页音乐播放器DewPlayer使用方法
Dec 18 Javascript
取得窗口大小 兼容所有浏览器的js代码
Aug 09 Javascript
JS冒泡事件的快速解决方法
Dec 16 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
Jan 02 Javascript
浅谈Javascript中的Function与Object
Jan 26 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
Jan 10 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
Dec 19 Javascript
vue-router路由参数刷新消失的问题解决方法
Jun 17 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
Oct 24 Javascript
js实现车辆管理系统
Aug 26 Javascript
微信小程序实现点击生成随机验证码
Sep 09 Javascript
浅谈es6中的元编程
Dec 01 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验证码(支持中文)
2007/02/14 PHP
PHP 5.0对象模型深度探索之对象复制
2008/03/27 PHP
php仿ZOL分页类代码
2008/10/02 PHP
php fsockopen中多线程问题的解决办法[翻译]
2011/11/09 PHP
php selectradio和checkbox默认选择的实现方法详解
2013/06/29 PHP
CodeIgniter框架中_remap()使用方法2例
2014/03/10 PHP
PHP使用ffmpeg给视频增加字幕显示的方法
2015/03/12 PHP
php  单例模式详细介绍及实现源码
2016/11/05 PHP
javascript 用记忆函数快速计算递归函数
2010/03/15 Javascript
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
2013/06/25 Javascript
JQuery each打印JS对象的方法
2013/11/13 Javascript
浅谈轻量级js模板引擎simplite
2015/02/13 Javascript
jQuery焦点图插件SaySlide
2015/12/21 Javascript
js判断当前页面用什么浏览器打开的方法
2016/01/06 Javascript
详解JavaScript对象序列化
2016/01/19 Javascript
js剪切板应用clipboardData实例解析
2016/05/29 Javascript
微信小程序 简单教程实例详解
2017/01/13 Javascript
vue v-model表单控件绑定详解
2017/05/17 Javascript
浅析vue.js数组的变异方法
2018/06/30 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
2019/05/24 Javascript
Vue3.x源码调试的实现方法
2019/10/13 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
2020/08/03 Javascript
Python multiprocessing模块中的Pipe管道使用实例
2015/04/11 Python
Python通过DOM和SAX方式解析XML的应用实例分享
2015/11/16 Python
Python2.7下安装Scrapy框架步骤教程
2017/12/22 Python
Python简单获取二维数组行列数的方法示例
2018/12/21 Python
python监控nginx端口和进程状态
2019/09/06 Python
html5是什么_动力节点Java学院整理
2017/07/07 HTML / CSS
台湾最大银发乐活百货:乐龄网
2018/05/21 全球购物
领先的英国注册在线药房 :Simply Meds Online
2019/03/28 全球购物
车库门开启器、遥控器和零件:Chamberlain
2019/04/09 全球购物
项目考察欢迎辞
2014/01/17 职场文书
未受刑事制裁公证证明
2014/09/20 职场文书
关于成立领导小组的通知
2015/04/23 职场文书
宝宝满月宴答谢词
2015/09/30 职场文书
各种货币符号快捷输入
2022/02/17 杂记