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


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 一些用法小结
Sep 11 Javascript
javascript结合canvas实现图片旋转效果
May 03 Javascript
整理一些最近经常遇到的前端面试题
Apr 25 Javascript
纯JS实现只能输入数字的简单代码
Jun 21 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
使用Angular CLI生成路由的方法
Mar 24 Javascript
vue集成chart.js的实现方法
Aug 20 Javascript
Vue实现简易计算器
Feb 25 Javascript
浅析 Vue 3.0 的组装式 API(一)
Aug 31 Javascript
基于Vant UI框架实现时间段选择器
Dec 24 Javascript
vue3.0封装轮播图组件的步骤
Mar 04 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脚本的10个技巧(6)
2006/10/09 PHP
PHP 编写大型网站问题集
2010/05/07 PHP
php function用法如何递归及return和echo区别
2014/03/07 PHP
php把数组值转换成键的方法
2015/07/13 PHP
Laravel5.5 视图 - 创建视图和数据传递示例
2019/10/21 PHP
不同浏览器的怪癖小结
2010/07/11 Javascript
jquery的ajax请求全面了解
2013/03/20 Javascript
有关于JS构造函数的重载和工厂方法
2013/04/07 Javascript
Js动态添加复选框Checkbox的实例方法
2013/04/08 Javascript
js定时器(执行一次、重复执行)
2014/03/07 Javascript
使用jQuery设置disabled属性与移除disabled属性
2014/08/21 Javascript
一个css与js结合的下拉菜单支持主流浏览器
2014/10/08 Javascript
JavaScript动态修改网页元素内容的方法
2015/03/21 Javascript
解析javascript图片懒加载与预加载的分析总结
2016/10/27 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
2017/04/22 Javascript
浅谈React Event实现原理
2018/09/20 Javascript
layer.confirm()右边按钮实现href的例子
2019/09/27 Javascript
Vue.directive 实现元素scroll逻辑复用
2019/11/29 Javascript
JS实现点击掉落特效
2021/01/29 Javascript
[41:08]2014 DOTA2国际邀请赛中国区预选赛 HGT VS NE
2014/05/22 DOTA
Python的函数嵌套的使用方法
2014/01/24 Python
一个计算身份证号码校验位的Python小程序
2014/08/15 Python
Python psutil模块简单使用实例
2015/04/28 Python
Flask框架的学习指南之开发环境搭建
2016/11/20 Python
python版大富翁源代码分享
2018/11/19 Python
Python批量生成幻影坦克图片实例代码
2019/06/04 Python
Django rstful登陆认证并检查session是否过期代码实例
2019/08/13 Python
python json.dumps中文乱码问题解决
2020/04/01 Python
Python实现一个论文下载器的过程
2021/01/18 Python
庆元旦广播稿
2014/02/10 职场文书
数学与统计学院学生个人职业生涯规划书
2014/02/10 职场文书
2016清明节森林防火广播稿
2015/12/17 职场文书
初中班主任心得体会
2016/01/07 职场文书
小学五年级(说明文3篇)
2019/08/13 职场文书
Anaconda安装pytorch及配置PyCharm 2021环境
2021/06/04 Python
修改Nginx配置返回指定content-type的方法
2022/09/23 Servers