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


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 相关文章推荐
JavaScript中的变量声明早于赋值分析
Mar 01 Javascript
JavaScript中创建类/对象的几种方法总结
Nov 29 Javascript
浅谈轻量级js模板引擎simplite
Feb 13 Javascript
12306验证码破解思路分享
Mar 25 Javascript
JavaScript中Function()函数的使用教程
Jun 04 Javascript
JavaScript中的acos()方法使用详解
Jun 14 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
Aug 23 Javascript
模仿password输入框的实现代码
Jun 07 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
Sep 04 Javascript
小程序实现选择题选择效果
Nov 04 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
May 21 Javascript
vue按需加载实例详解
Sep 06 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往windows中添加用户
2006/12/06 PHP
php 获取远程网页内容的函数
2009/09/08 PHP
php生成年月日下载列表的方法
2015/04/24 PHP
实现PHP中session存储及删除变量
2018/10/15 PHP
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/06 Javascript
JavaScript高级程序设计 客户端存储学习笔记
2011/09/10 Javascript
jQuery控制iFrame(实例代码)
2013/11/19 Javascript
javascript函数作用域学习示例(js作用域)
2014/01/13 Javascript
JavaScript转换二进制编码为ASCII码的方法
2015/04/16 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
2016/05/19 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
2016/08/11 Javascript
js html css实现复选框全选与反选
2016/10/09 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
2016/10/26 Javascript
Vue2.0 UI框架ElementUI使用方法详解
2017/04/14 Javascript
浅谈react 同构之样式直出
2017/11/07 Javascript
详解layui弹窗父子窗口之间传参数的方法
2018/01/16 Javascript
解决layui中的form表单与button的点击事件冲突问题
2018/08/15 Javascript
利用jsonp解决js读取本地json跨域的问题
2018/12/11 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
2019/10/14 Javascript
js实现无缝轮播图插件封装
2020/07/31 Javascript
微信小程序使用前置摄像头拍照
2020/10/22 Javascript
微信小程序学习之自定义滚动弹窗
2020/12/20 Javascript
Python中用于计算对数的log()方法
2015/05/15 Python
深入理解Django-Signals信号量
2019/02/19 Python
简单了解python协程的相关知识
2019/08/31 Python
django实现支付宝支付实例讲解
2019/10/17 Python
python自动化测试之异常及日志操作实例分析
2019/11/09 Python
万得城电器土耳其网站:欧洲第一大电子产品零售商
2016/10/07 全球购物
自主招生自荐信指南
2014/02/04 职场文书
《去年的树》教学反思
2014/04/11 职场文书
保护环境建议书100字
2014/05/13 职场文书
2014年人大工作总结
2014/12/10 职场文书
2015元旦晚会主持人开场白+结束语
2014/12/14 职场文书
关爱留守儿童捐款倡议书
2015/04/27 职场文书
用JS创建一个录屏功能
2021/11/11 Javascript
前端实现滑动按钮AJAX与后端交互的示例代码
2022/02/24 Javascript