由于项目需要，用笨方法自己写了一个检测表单元素内容是否被修改的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的直接把文本框等一些表单元素封装到数组里传过去就行了，在这里不演示了
当然在接收数据的页面或者类里，要判断一下哪些表单元素的值被传过来了，防止没传过来的元素值也被修改，即判断一下哪个变量属性不为空就行
分享到：
相关推荐
"离开页面时检测表单元素是否被修改,提示保存的js代码"这个功能就是为了确保用户不会意外丢失他们的改动。当用户在表单上进行编辑后试图离开页面时，系统会弹出一个提示，询问他们是否确认离开，这样可以防止用户...
当用户修改输入框的值时，事件处理函数会被调用，检查当前值是否与初始值不同，从而判断值是否发生改变。 然而，对于更复杂的表单，可能需要验证多个字段或整个表单的状态。这时可以创建一个函数来批量检查所有需要...
通过修改表单元素的样式，如添加红色边框或错误提示，我们可以即时反馈验证结果。同时，还可以使用`setCustomValidity()`方法设置自定义的错误消息。 接下来，**随机验证码生成**通常用于防止机器自动注册。...
1. **获取表单元素**：通过`document.getElementById`或`document.querySelector`等方法获取表单元素，例如`<input>`、`<select>`和`<textarea>`等。 2. **添加事件监听器**：通常我们会对`onsubmit`事件进行监听，...
在JavaScript编程领域，创建一个全面的注册表单是前端开发中的常见任务，它涉及到用户交互、数据验证和安全等多个方面。本项目以京东注册表单为蓝本，实现了丰富的功能，包括用户信息验证、用户名检查、密码强度检测...
首先，表单验证的基本原理是通过监听表单元素的事件（如onsubmit、onchange等）来触发验证函数。当用户提交表单或者改变输入时，验证函数会检查输入是否符合预设的规则，如非空检查、邮箱格式验证、手机号码合法性...
### JavaScript表单验证知识点详解 #### 一、前言 在Web开发中，表单验证是确保用户输入数据准确性和安全性的关键步骤。通过前端JavaScript进行初步的数据验证，可以极大地提高用户体验并减轻后端服务器的压力。本...
4. **边界检测**：为了让拖曳更符合用户预期，我们需要添加边界检测，确保元素不会被拖出容器之外。这需要计算元素和容器的相对位置，然后根据边界进行限制。 5. **可嵌套与拖曳子元素**：如果流程图包含嵌套的节点...
1. **JavaScript基础**：理解JavaScript是Web开发中的客户端脚本语言，用于处理用户的交互，包括获取和修改DOM（文档对象模型）元素，如`input`元素的值。 2. **DOM操作**：DOM是HTML和XML文档的结构化表示，...
JavaScript是Web开发中不可或缺的一部分，尤其在处理用户交互时，表单相关事件起着至关重要的作用。本篇文章主要探讨了JavaScript中的两个关键表单事件：获得焦点事件（onfocus）和失去焦点事件（onblur），以及一个...
这里提供的一种方法是通过遍历表单元素并比较当前值与初始值来判断是否发生了变化。下面我们将详细探讨这个方法。 首先，我们定义一个名为`formIsDirty`的函数，它接收一个参数`form`，即要检查的表单对象。函数...
将错误消息插入到表单元素附近，以便用户能直观地看到问题所在。 5. **阻止默认行为**：为了防止未通过验证的表单被提交，我们可以在`submit`事件处理函数中调用`event.preventDefault()`，阻止表单的默认提交行为...
JavaScript动态表单是一种在网页上创建、修改或交互操作表单元素的技术，它极大地提升了用户界面的灵活性和用户体验。在Web开发中，JavaScript扮演着关键角色，为表单提供了丰富的功能，如验证输入、动态添加删除...
然后通过 `test()` 方法检测传入的字符串是否符合其中任一正则表达式的规则，并根据结果修改页面上对应元素的文本内容和颜色。 ### 2. 手机号码验证 手机号码验证同样重要。以下代码实现了对手机号码格式的验证： ...
在“检测健康程度.htm”这个文件中，我们可能会看到HTML用于构建用户界面，如表单元素（input字段）让用户输入个人信息，而JavaScript则负责处理表单提交事件，获取数据并进行计算。JavaScript代码可能包含以下关键...
1. **DOM操作**：JavaScript通过Document Object Model（DOM）来操作HTML元素，如获取表单元素、修改元素属性、添加或删除事件监听器等。 2. **事件处理**：在表单提交或输入更改时触发JavaScript函数，比如`...
1. **表单元素与输入框**： HTML中的`<input>`标签用于创建各种类型的输入控件，如文本字段、密码字段、复选框、单选按钮等。在本案例中，我们关注的是文本输入框，通常用于获取用户输入的文本数据。 2. **事件...
点击按钮后，JavaScript函数会被调用，计算结果，并可能通过修改页面上的某个元素（如`<p>`或`<div>`）来显示结果。 这个例子展示了JavaScript如何与HTML和用户交互，提供动态和响应式的用户体验。对于初学者来说，...
5.15使用一个关联数组来存储表单元素名和值 第6章使用JavaScript函数构建重用性 6.0简介 6.1创建一段可重用的代码 6.2把单个数据值传递到函数 6.3把复杂的数据对象传递给函数 6.4创建一个动态运行时...
通过遍历DOM树，JavaScript可以轻松地找到、修改或创建页面上的任何元素。例如，以下HTML文档： ```html <head><title>DOM Tutorial</title></head> <body><h1>DOM Lesson one</h1><p>Hello world!</p></body> ```...