JavaScript检测表单元素值是不是被修改
日期：2014-05-16 浏览次数：20386 次
JavaScript检测表单元素值是否被修改
由于项目需要，用笨方法自己写了一个检测表单元素内容是否被修改的js函数
原理是表单元素初始化时，用一个函数封装了表单元素初始化的值，
表单提交时用一个函数封装提交时的表单元素值，
然后再与初始化时的一一对比，
表单元素有修改的，该元素的值将被提交。
其中checkModify 是提交表单信息时调用的，
markFormElements 是表单元素初始化时调用的，用于封装各表单元素的初始值，返回一个json数组
JavaScript代码如下：
页面中不带form的直接把文本框等一些表单元素封装到数组里传过去就行了，在这里不演示了
当然在接收数据的页面或者类里，要判断一下哪些表单元素的值被传过来了，防止没传过来的元素值也被修改，即判断一下哪个变量属性不为空就行
由于项目需要，用笨方法自己写了一个检测表单元素内容是否被修改的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的直接把文本框等一些表单元素封装到数组里传过去就行了，在这里不演示了
当然在接收数据的页面或者类里，要判断一下哪些表单元素的值被传过来了，防止没传过来的元素值也被修改，即判断一下哪个变量属性不为空就行
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
