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


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 字符编码规则
May 04 Javascript
果断收藏9个Javascript代码高亮脚本
Jan 06 Javascript
简单介绍jsonp 使用小结
Jan 27 Javascript
jQuery实现的可编辑表格完整实例
Jun 20 Javascript
request请求获取参数的实现方法(post和get两种方式)
Sep 27 Javascript
Bootstrap Navbar Component实现响应式导航
Oct 08 Javascript
angularjs 表单密码验证自定义指令实现代码
Oct 27 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
Mar 01 Javascript
从setTimeout看js函数执行过程
Dec 19 Javascript
JS实现页面跳转与刷新的方法汇总
Aug 30 Javascript
解决js中的setInterval清空定时器不管用问题
Nov 17 Javascript
微信小程序绘制半圆(弧形)进度条
Nov 18 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
ThinkPHP页面跳转success与error方法概述
2014/06/25 PHP
Laravel网站打开速度优化的方法汇总
2017/07/16 PHP
ThinkPHP 5.1 跨域配置方法
2019/10/11 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
jQuery 性能优化指南(3)
2009/05/21 Javascript
JS解析XML的实现代码
2009/11/12 Javascript
javascript中的parseInt和parseFloat区别
2013/07/12 Javascript
JS实现自适应高度表单文本框的方法
2015/02/25 Javascript
在JavaScript中正确引用bind方法的应用
2015/05/11 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
2015/12/03 Javascript
javascript 将共享属性迁移到原型中去的实现方法
2016/08/31 Javascript
JavaScript队列、优先队列与循环队列
2016/11/14 Javascript
关于AngularJs数据的本地存储详解
2017/01/20 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
2017/06/25 Javascript
基于Vue实现支持按周切换的日历
2020/09/24 Javascript
详解webpack编译多页面vue项目的配置问题
2017/12/11 Javascript
JavaScript中Object基础内部方法图
2018/02/05 Javascript
node.js通过axios实现网络请求的方法
2018/03/05 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
2019/10/30 Javascript
js实现简单的打印表格
2020/01/15 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
2020/09/04 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
2020/11/17 Vue.js
[02:15]2014DOTA2国际邀请赛 专访LGD.lin小兔子是大腿
2014/07/14 DOTA
Python中使用PyQt把网页转换成PDF操作代码实例
2015/04/23 Python
Python浅拷贝与深拷贝用法实例
2015/05/09 Python
解决python gdal投影坐标系转换的问题
2020/01/17 Python
web字体加载方案优化小结
2019/11/29 HTML / CSS
如何在Shell脚本中使用函数
2015/09/06 面试题
奥巴马开学演讲稿
2014/05/15 职场文书
美术社团活动总结
2014/06/27 职场文书
群众路线个人对照检查材料2014
2014/09/26 职场文书
2015年护士节活动策划方案
2015/05/04 职场文书
2016年“世界气象日”广播稿
2015/12/17 职场文书
Python基础之条件语句详解
2021/06/16 Python
Spring中的使用@Async异步调用方法
2021/11/01 Java/Android
Python Django / Flask如何使用Elasticsearch
2022/04/19 Python