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


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 相关文章推荐
获取Javscript执行函数名称的方法
Dec 22 Javascript
详解jquery uploadify 上传文件
Nov 09 Javascript
jquery设置按钮停顿3秒不可用
Mar 07 Javascript
node.js中的fs.rmdir方法使用说明
Dec 16 Javascript
javascript实现控制浏览器全屏
Mar 30 Javascript
JS操作COOKIE实现备忘记录的方法
Apr 01 Javascript
Bootstrap实现带动画过渡的弹出框
Aug 09 Javascript
Vue.js组件tree实现省市多级联动
Dec 02 Javascript
vue中实现先请求数据再渲染dom分享
Mar 17 Javascript
浅析TypeScript 命名空间
Mar 19 Javascript
es6数组之扩展运算符操作实例分析
Apr 25 Javascript
关于JavaScript回调函数的深入理解
Jun 27 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中文乱码怎么办如何让浏览器自动识别utf-8
2014/01/15 PHP
PHP之uniqid()函数用法
2014/11/03 PHP
PHP+MySQL之Insert Into数据插入用法分析
2015/09/27 PHP
js日期、星座的级联显示代码
2014/01/23 Javascript
javascript实现简单的二级联动
2015/03/19 Javascript
Nodejs Express4.x开发框架随手笔记
2015/11/23 NodeJs
js实现select下拉框菜单
2015/12/08 Javascript
Bootstrap模态框调用功能实现方法
2016/09/19 Javascript
详解Node.js中的事件机制
2016/09/22 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
2016/11/07 Javascript
JavaScript实现垂直滚动条效果
2017/01/18 Javascript
微信小程序中顶部导航栏的实现代码
2017/03/30 Javascript
vue实现直播间点赞飘心效果的示例代码
2019/09/20 Javascript
JavaScript读取本地文件常用方法流程解析
2020/10/12 Javascript
Python中的二叉树查找算法模块使用指南
2014/07/04 Python
Python找出9个连续的空闲端口
2016/02/01 Python
Python学习笔记之open()函数打开文件路径报错问题
2018/04/28 Python
python调用摄像头显示图像的实例
2018/08/03 Python
使用tensorflow实现线性回归
2018/09/08 Python
Python3实现从排序数组中删除重复项算法分析
2019/04/03 Python
python openvc 裁剪、剪切图片 提取图片的行和列
2019/09/19 Python
使用python实现回文数的四种方法小结
2019/11/24 Python
Python箱型图处理离群点的例子
2019/12/09 Python
python seaborn heatmap可视化相关性矩阵实例
2020/06/03 Python
使用python操作lmdb对数据读取的实例
2020/12/11 Python
详解CSS中iconfont的使用
2015/08/04 HTML / CSS
芬兰设计商店美国:Finnish Design Shop US
2019/03/25 全球购物
毕业生就业意向书
2014/04/01 职场文书
党性锻炼的心得体会
2014/09/03 职场文书
检讨书模板
2015/01/29 职场文书
导游词之泰山玉皇顶
2019/12/23 职场文书
Django 实现jwt认证的示例
2021/04/30 Python
AJAX实现省市县三级联动效果
2021/10/16 Javascript
JavaScript组合继承详解
2021/11/07 Javascript
Java 超详细讲解设计模式之中的抽象工厂模式
2022/03/25 Java/Android
分享几个实用的CSS代码块
2022/06/10 HTML / CSS