由于项目需要，用笨方法自己写了一个检测表单元素内容是否被修改的js函数
原理是表单元素初始化时，用一个函数封装了表单元素初始化的值，
表单提交时用一个函数封装提交时的表单元素值，
然后再与初始化时的一一对比，
表单元素有修改的，该元素的值将被提交。
其中checkModify 是提交表单信息时调用的，
markFormElements 是表单元素初始化时调用的，用于封装各表单元素的初始值，返回一个json数组
JavaScript代码如下：
function checkModify(f, old) // 检查表单元素的内容哪些被修改了，old封装了表单初始化的内容
{// 参数f是传入的表单对象或是表单元素封装成的数组
var formElements = f.elements;
if (f == "[object HTMLFormElement]")
formElements = f.elements;
else
formElements = f;
var element = "";
var newResult = "";
for ( var i = 0 in formElements) {
element = formElements[i];
newResult += getElementPro(element);
}
newResult = newResult.substr(0, newResult.lastIndexOf(","));
newResult = "[" + newResult + "]";
var o = eval(newResult);
var _o = old;
var s = null;
var _s=[];
for (aa in o) {
for (bb in _o) {
if (o[aa].name == _o[bb].name) {
if (o[aa].value != _o[bb].value) {
//s = s + o[aa].name + "=" + o[aa].value + "&";
_s.push(o[aa].name);
_s.push("=");
_s.push(o[aa].value);
_s.push("&");
}
}
}
}
if (_s.length ==0) {
alert("您还未做任何修改！");
if (f == "[object HTMLFormElement]")
return false;
}
s=_s.join("");
if (f == "[object HTMLFormElement]") {
f.action = f.action + "?" + s;
return true;
} else
return s;
}
function markFormElements(f) // 封装了表单元素初始化时的值，将json类型数据封装到数组里，返回数组对象
{// 参数f可以是表单对象，也可以是表单元素封装成的数组
var formElements = "";
if (f == "[object HTMLFormElement]")
formElements = f.elements;
else
formElements = f;
var element = "";
var result = "";
var _result=[];
var type = "";
for ( var i = 0; i < formElements.length; i++) {
element = formElements[i];
_result.push(getElementPro(element));
if(i!=formElements.length-1)
_result.push(",");
//result += getElementPro(element);
}
result=_result.join("");
//result = result.substr(0, result.lastIndexOf(","));
result = "[" + result + "]";
return eval(result);
}
function getElementPro(element) // 将表单元素name属性和值封装成json类型数据
{
var a = "";
var _a=[];
if (element.type == "text" || element.type == "password"
|| element.type == "select-one" || element.type == "textarea") {
//a += "{\"name\":\"" + element.name + "\",\"value\":\"" + element.value
// + "\"},";
_a.push("{\"name\":\"");
_a.push(element.name);
_a.push("\",\"value\":\"");
_a.push(element.value);
_a.push("\"}");
}
a=_a.join("");
return a;
}
带form的调用实例
<html><head><title>测试</title>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
</head>
<body>
<form name="theForm" action="test.jsp">
<input type="text" value="hehe" name="hehe"/>
<input type="text" value="haha" name="haha"/>
<input type="submit" value="提交" />
</form>
<script type="text/javascript">
var temp=markFormElements($("form")[0]);
$("form").submit(function(){
var flag=checkModify($(this)[0],temp);
if(flag)
if(confirm("确定提交修改内容？"))
return true;
return false;
});
</script>
</body>
</html>
页面中不带form的直接把文本框等一些表单元素封装到数组里传过去就行了，在这里不演示了
当然在接收数据的页面或者类里，要判断一下哪些表单元素的值被传过来了，防止没传过来的元素值也被修改，即判断一下哪个变量属性不为空就行
分享到：
相关推荐
5.15使用一个关联数组来存储表单元素名和值 第6章使用JavaScript函数构建重用性 6.0简介 6.1创建一段可重用的代码 6.2把单个数据值传递到函数 6.3把复杂的数据对象传递给函数 6.4创建一个动态运行时...
16.12 判断表单是否已修改 16.13 判断控件的类型 16.14 密码强度检查 16.15 身份证的验证 16.16 JavaScript生成验证码 16.17 JavaScript生成验证码(二) 第17章 进度条、滚动条特效处理 17.1 使用符号制作的进度条 ...
《JavaScript权威指南（第6版）》主要讲述的内容涵盖JavaScript语言本身，以及Web浏览器所实现的JavaScript API。本书第6版涵盖了HTML5和ECMAScript 5，很多章节完全重写，增加了当今Web开发的最佳实践的内容，新增...
示例描述：介绍JavaScript与表单控件。 6.1.html JavaScript获取文本框的值。 6.2.html JavaScript控制文本框。 6.3.html 文本框的JavaScript特效。 6.4.html 获取select元素的值。 6.5....
16.12 判断表单是否已修改 16.13 判断控件的类型 16.14 密码强度检查 16.15 身份证的验证 16.16 JavaScript生成验证码 16.17 JavaScript生成验证码(二) 第17章 进度条、滚动条特效处理 17.1 使用符号制作的进度条 ...
《JavaScript权威指南（第6版）》主要讲述的内容涵盖JavaScript语言本身，以及Web浏览器所实现的JavaScript API。本书第6版涵盖了HTML5和ECMAScript 5，很多章节完全重写，增加了当今Web开发的最佳实践的内容，新增...
《JavaScript权威指南(第6版)》要讲述的内容涵盖JavaScript语言本身，以及web浏览器所实现的JavaScript API。本书第6版涵盖了 html5 和 ecmascript 5，很多章节完全重写，增加了当今 web 开发的最佳实践的内容，新增...
检测表单输入元素的更改并自动禁用/启用提交/重置按钮。 表单上每个输入元素都有一个隐藏属性，您可以使用该属性确定值是否已更改。 每种类型的输入都有其自己的属性名称。 例如 对于text / textarea，它是default...
实例072 通过单选按钮控制其他表单元素是否可用 117 2.4 复选框 117 实例073 不提交表单获取复选框的值 118 实例074 控制复选框的全选或反选 118 实例075 只有一个复选框时控制复选框的全选或反选 119 2.5 密码域 ...
• 11.10.htm 动态修改表单元素内容 第12章（\第12章） • 12.1.htm Document树的简单例子 • 12.2.htm getElementById()方法 • 12.3.htm DOM结点属性 • 12.4.htm 文档...
11.5.2 定义表单元素 11.5.3 客户端表单校验及其例子 11.5.4 创建一款通用的客户端表单校验组件 11.6 其他内置对象 11.6.1 Navigator对象--浏览器总体信息的代表 11.6.2 Screen对象--提供...
OReilly精品图书系列：JavaScript权威指南（第6版） 作者简介 David Flanagan是一名程序员，也是一名作家，它的个人网站是 。他在O’Reilly出版的其他畅销书还包括《JavaScript Pocket Reference》、《The Ruby ...
《JavaScript权威指南(第6版)》要讲述的内容涵盖JavaScript语言本身，以及web浏览器所实现的JavaScript API。本书第6版涵盖了 html5 和 ecmascript 5，很多章节完全重写，增加了当今 web 开发的最佳实践的内容，新增...
《JavaScript权威指南(第6版)》要讲述的内容涵盖JavaScript语言本身，以及web浏览器所实现的JavaScript API。本书第6版涵盖了 html5 和 ecmascript 5，很多章节完全重写，增加了当今 web 开发的最佳实践的内容，新增...
• 11.10.htm 动态修改表单元素内容 第12章（\第12章） • 12.1.htm Document树的简单例子 • 12.2.htm getElementById()方法 • 12.3.htm DOM结点属性 • 12.4.htm 文档...
1.2.2 不要版本检测 1.2.3 通过平稳退化保证可访问性 1.2.4 为重用命名空间而进行规划 1.2.5 通过可重用的对象把事情简化 1.2.6 一定要自己动手写代码 1.3 JavaScript语法中常见的陷阱...
参数myform指代验证的表单，可以比作验证树DOM的根，之后的JavaScript会遍历所有元素(elements)，逐个检验，若没有设置验证则直接跳过，若有一个验证不通过，都不会将表单提交，并将光标定位到该处(focus())，若有...