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


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 相关文章推荐
JSON 教程 json入门学习笔记
Sep 22 Javascript
node.js中的fs.openSync方法使用说明
Dec 17 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
Oct 20 Javascript
客户端验证用户名和密码的方法详解
Jun 16 Javascript
AngularJS基础 ng-mouseleave 指令详解
Aug 02 Javascript
js获取指定字符前/后的字符串简单实例
Oct 27 Javascript
Validform表单验证总结篇
Oct 31 Javascript
详解React之父子组件传递和其它一些要点
Jun 25 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
Jan 21 Javascript
对vue中的事件穿透与禁止穿透实例详解
Oct 28 Javascript
JS实现吸顶特效
Jan 08 Javascript
详解JavaScript之Array.reduce源码解读
Nov 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
漫威DC即将合作联动,而双方早已经秘密开始
2020/04/09 欧美动漫
php中删除字符串中最先出现某个字符的实现代码
2013/02/03 PHP
深入php多态的实现详解
2013/06/09 PHP
php通过字符串调用函数示例
2014/03/02 PHP
33道php常见面试题及答案
2015/07/06 PHP
[原创]ThinkPHP让../Public在模板不解析(直接输出)的方法
2015/10/09 PHP
php使用goto实现自动重启swoole、reactphp、workerman服务的代码
2020/04/13 PHP
JavaScript 参考教程
2006/12/29 Javascript
javascript操作JSON的要领总结
2012/12/09 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
2013/08/06 Javascript
js控制页面控件隐藏显示的两种方法介绍
2013/10/09 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
2013/11/14 Javascript
jquery的ajax异步请求接收返回json数据实例
2014/06/16 Javascript
js中string转int把String类型转化成int类型
2014/08/13 Javascript
javascript省市级联功能实现方法实例详解
2015/10/20 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
2016/04/14 Javascript
javascript实现延时显示提示框特效代码
2016/04/27 Javascript
JavaScript基础重点(必看)
2016/07/09 Javascript
AngularJS开发教程之控制器之间的通信方法分析
2016/12/25 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
2020/01/14 Javascript
Python中使用 Selenium 实现网页截图实例
2014/07/18 Python
Python多进程分块读取超大文件的方法
2016/04/13 Python
Python处理PDF及生成多层PDF实例代码
2017/04/24 Python
python数据预处理之将类别数据转换为数值的方法
2017/07/05 Python
Python中查看变量的类型内存地址所占字节的大小
2019/06/26 Python
Python 从subprocess运行的子进程中实时获取输出的例子
2019/08/14 Python
Flask项目中实现短信验证码和邮箱验证码功能
2019/12/05 Python
python 操作mysql数据中fetchone()和fetchall()方式
2020/05/15 Python
python中的django是做什么的
2020/07/31 Python
《花木兰》教学反思
2014/04/09 职场文书
8和9的加减法教学反思
2014/05/01 职场文书
干部选拔任用方案
2014/05/26 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话全文
2014/10/25 职场文书
委托开发合同书(标准版)
2019/08/07 职场文书
Mysql数据库索引面试题(程序员基础技能)
2021/05/31 MySQL
Python道路车道线检测的实现
2021/06/27 Python