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


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 相关文章推荐
漂亮的仿flash菜单,来自蓝色经典
Jun 26 Javascript
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
Mar 23 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
Nov 04 Javascript
JS实现随机乱撞彩色圆球特效的方法
May 05 Javascript
Jquery easyui 实现动态树
Nov 17 Javascript
Bootstrap每天必学之基础排版
Nov 20 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
Feb 19 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
Aug 02 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
Apr 13 Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
Aug 15 Javascript
vue按需引入element Transfer 穿梭框
Sep 30 Javascript
Vue动态面包屑功能的实现方法
Jul 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作为Shell脚本语言使用
2006/10/09 PHP
多重?l件?合查?(一)
2006/10/09 PHP
Laravel 5框架学习之向视图传送数据(进阶篇)
2015/04/08 PHP
PHP的serialize序列化数据以及JSON格式化数据分析
2015/10/10 PHP
PHP后端银联支付及退款实例代码
2017/06/23 PHP
PHP children()函数讲解
2019/02/03 PHP
thinkPHP5.1框架路由::get、post请求简单用法示例
2019/05/06 PHP
Span元素的width属性无效果原因及解决方案
2010/01/15 Javascript
通过jQuery源码学习javascript(一)
2012/12/27 Javascript
Javascript实现单张图片浏览
2014/12/18 Javascript
jQuery找出网页上最高元素的方法
2015/03/20 Javascript
JavaScript判断数组是否包含指定元素的方法
2015/07/01 Javascript
jQuery UI设置固定日期选择特效代码分享
2015/08/27 Javascript
javascript检测flash插件是否被禁用的方法
2016/01/14 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
2016/03/07 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
2020/05/16 Javascript
jquery dataview数据视图插件使用方法
2016/12/23 Javascript
vue监听滚动事件实现滚动监听
2017/04/11 Javascript
js 获取元素的具体样式信息getcss(实例讲解)
2017/07/05 Javascript
通过JS深度判断两个对象字段相同
2019/06/14 Javascript
js设计模式之代理模式及订阅发布模式实例详解
2019/08/15 Javascript
在vue和element-ui的table中实现分页复选功能
2019/12/04 Javascript
Python进阶之递归函数的用法及其示例
2018/01/31 Python
Python实现按逗号分隔列表的方法
2018/10/23 Python
python Django框架实现web端分页呈现数据
2019/10/31 Python
python数据预处理 :数据抽样解析
2020/02/24 Python
10个示例带你掌握python中的元组
2020/11/23 Python
捷克电器和DJ设备网上商店:Electronic-star
2017/07/18 全球购物
Under Armour安德玛德国官网:美国高端运动科技品牌
2019/03/09 全球购物
eDreams德国:南欧领先的在线旅游公司
2020/12/07 全球购物
卫校护理专业毕业生求职信
2013/11/26 职场文书
大学生自荐信
2013/12/11 职场文书
法律专业大学生职业生涯规划书:向目标一步步迈进
2014/09/22 职场文书
生日宴会家属答谢词
2015/09/29 职场文书
2016年第32个教师节红领巾广播稿
2015/12/18 职场文书
Python中time与datetime模块使用方法详解
2022/03/31 Python