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


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 实现窗口的最大化不论什么情况
Sep 03 Javascript
jQuery右下角旋转环状菜单特效代码
Aug 10 Javascript
jQuery插件实现适用于移动端的地址选择器
Feb 18 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
Dec 23 Javascript
Angularjs处理页面闪烁的解决方法
Mar 09 Javascript
vue2.0中click点击当前li实现动态切换class
Jun 21 Javascript
JS同步、异步、延迟加载的方法
May 05 Javascript
详解Angular6 热加载配置方案
Aug 18 Javascript
Javascript中绑定click事件的四种方式介绍
Oct 26 Javascript
JS实现的小火箭发射动画效果示例
Dec 08 Javascript
javascript事件循环event loop的简单模型解释与应用分析
Mar 14 Javascript
基于js判断浏览器是否支持webGL
Apr 18 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原理的opcodes(操作码)
2010/10/26 PHP
一些php技巧与注意事项分析
2011/02/03 PHP
分割GBK中文遭遇乱码的解决方法
2013/08/09 PHP
php通过Chianz.com获取IP地址与地区的方法
2015/01/14 PHP
js实现iframe动态调整高度的代码
2008/01/06 Javascript
jQuery Selector选择器小结
2010/05/06 Javascript
ExtJS下书写动态生成的xml(兼容火狐)
2013/04/02 Javascript
字段太多jquey快速清空表单内容方法
2014/08/21 Javascript
JavaScript改变CSS样式的方法汇总
2015/05/07 Javascript
JavaScript实现级联菜单的方法
2015/06/29 Javascript
Bootstrap对话框使用实例讲解
2016/09/24 Javascript
js获取当前周、上一周、下一周日期
2017/03/19 Javascript
解析NodeJS异步I/O的实现
2017/04/13 NodeJs
vue-cli的eslint相关用法
2017/09/29 Javascript
Vue.js用法详解
2017/11/13 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
2017/12/06 Javascript
vue-cli3+typescript初体验小结
2019/02/28 Javascript
Vue.js实现tab切换效果
2019/07/24 Javascript
vue+elementUI动态生成面包屑导航教程
2019/11/04 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
2020/11/10 Javascript
python操作日期和时间的方法
2014/03/11 Python
python使用opencv进行人脸识别
2017/04/07 Python
python通过实例讲解反射机制
2019/10/17 Python
Python + selenium + crontab实现每日定时自动打卡功能
2020/03/31 Python
详解如何解决canvas图片getImageData,toDataURL跨域问题
2018/09/17 HTML / CSS
Lou & Grey美国官网:主打舒适性面料服饰
2017/12/21 全球购物
Tretorn美国官网:瑞典外套和鞋类品牌,抵御风雨
2018/07/19 全球购物
运动会通讯稿100字
2014/01/31 职场文书
暑期培训班招生方案
2014/08/26 职场文书
办理信用卡收入证明范例
2014/09/13 职场文书
党员对照检查材料思想汇报(党的群众路线)
2014/09/24 职场文书
大学生党员批评与自我批评范文
2014/10/14 职场文书
2017公司年会主持人开幕词
2016/03/04 职场文书
python用tkinter开发的扫雷游戏
2021/06/01 Python
只用Python就可以制作的简单词云
2021/06/07 Python
详细介绍Java中的CyclicBarrier
2022/04/13 Java/Android