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


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 学习笔记(十三)Dom创建表格
Jan 21 Javascript
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
Apr 01 Javascript
解决Extjs上传图片无法预览的解决方法
Mar 22 Javascript
js使用eval解析json(js中使用json)
Jan 17 Javascript
jQuery浏览器CSS3特写兼容实例
Jan 19 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
Feb 19 Javascript
bootstrap学习笔记之初识bootstrap
Jun 21 Javascript
详解js中==与===的区别
Jan 08 Javascript
VUE重点问题总结
Mar 19 Javascript
vue构建动态表单的方法示例
Sep 22 Javascript
浅谈KOA2 Restful方式路由初探
Mar 14 Javascript
基于VUE实现简单的学生信息管理系统
Jan 13 Vue.js
不用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设计模式 Interpreter(解释器模式)
2011/06/26 PHP
PHP 获取MySQL数据库里所有表的实现代码
2011/07/13 PHP
IIS6.0中配置php服务全过程解析
2013/08/07 PHP
Yii分页用法实例详解
2014/12/04 PHP
PHP基于IMAP收取邮件的方法示例
2017/08/07 PHP
php+laravel依赖注入知识点总结
2019/11/04 PHP
javascript:void(0)的作用示例介绍
2013/10/28 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
2013/12/16 Javascript
jquery对象访问是什么及使用方法介绍
2016/05/03 Javascript
JS动态给对象添加事件的简单方法
2016/07/19 Javascript
Three.js学习之网格
2016/08/10 Javascript
AngularJS删除路由中的#符号的方法
2016/09/20 Javascript
Vue验证码60秒倒计时功能简单实例代码
2018/06/22 Javascript
详解JavaScript的变量
2019/04/04 Javascript
python中lambda函数 list comprehension 和 zip函数使用指南
2014/09/28 Python
使用Node.js和Socket.IO扩展Django的实时处理功能
2015/04/20 Python
Python单链表简单实现代码
2016/04/27 Python
Python实现的生成格雷码功能示例
2018/01/24 Python
python实现微信防撤回神器
2019/04/29 Python
Python3内置模块之base64编解码方法详解
2019/07/13 Python
Python实现遗传算法(二进制编码)求函数最优值方式
2020/02/11 Python
python实现处理mysql结果输出方式
2020/04/09 Python
Python调用shell命令常用方法(4种)
2020/05/11 Python
Python 无限级分类树状结构生成算法的实现
2021/01/21 Python
Canvas绘制浮动球效果的示例
2017/12/29 HTML / CSS
迪卡侬荷兰官网:Decathlon荷兰
2017/10/29 全球购物
微软瑞士官方网站:Microsoft瑞士
2018/04/20 全球购物
中学生团员自我评价分享
2013/12/07 职场文书
优秀教师先进事迹
2014/01/22 职场文书
班组长竞聘书
2014/03/31 职场文书
大学生学习新党章思想汇报
2014/10/25 职场文书
领导干部考核评语
2015/01/04 职场文书
员工自我评价范文
2015/03/11 职场文书
2015年依法行政工作总结
2015/04/29 职场文书
小学六年级毕业感言
2015/07/30 职场文书
vue中data里面的数据相互使用方式
2022/06/05 Vue.js