本文转自:http://info.codepub.com/2008/09/info-22582.html
原文如下:
使用场合:当某个页面数据修改时,需要执行某些操作时
在页面的body加载事件(onload)中加上initFileds()就可以记录页面的初始数据
在需要判断页面数据是否改变时调用checkModification()方法就可判断数据是否改变
返回值为true就是已经改变
返回值为false就是没有改变
// 页面编辑数据
var inputsData;
var textareasData;
var selectsData;
// 记录下表单中的原始值
function initFileds() {
var inputs = document.getElementsByTagName("input");
var textareas = document.getElementsByTagName("textarea");
var selects = document.getElementsByTagName("select");
inputsData = new Array(inputs.length);
for (var i=0;i<inputs.length;i++) {
inputsData[i] = inputs[i].value;
if (inputs[i].type=="radio") {
inputsData[i]=inputs[i].checked;
}
}
textareasData = new Array(textareas.length);
for (var i=0;i<textareas.length;i++) {
textareasData[i] = textareas[i].value;
}
selectsData = new Array(selects.length);
for (var i=0;i<selects.length;i++) {
selectsData[i] = selects[i].value;
}
}
/*
* 判断表单中值是否被修改了
* submitCommand 表单有改动时,执行的javascript代码
*/
function checkModification(submitCommand) {
var inputs = document.getElementsByTagName("input");
var textareas = document.getElementsByTagName("textarea");
var selects = document.getElementsByTagName("select");
var hasBeenChanged = false;
for (var i=0;i<inputs.length;i++) {
if (inputs[i].type=="radio"&&(inputs[i].checked!=inputsData[i])) {
hasBeenChanged = true;
inputsData[i]=inputs[i].checked;
}
if (inputs[i].type!="radio"&&inputsData[i]!=inputs[i].value) {
if(inputs[i].name!="actionType"){
hasBeenChanged = true;
}
inputsData[i]=inputs[i].value;
}
}
for (var i=0;i<textareas.length;i++) {
if (textareasData[i]!=textareas[i].value) {
hasBeenChanged = true;
textareasData[i]=textareas[i].value;
}
}
for (var i=0;i<selects.length;i++) {
if (selectsData[i]!=selects[i].value) {
hasBeenChanged = true;
selectsData[i]=selects[i].value;
}
}
if (hasBeenChanged&&confirm("数据已经改变,是否保存?")) {
eval(submitCommand);
}
}
分享到:
相关推荐
在JavaScript中,检查表单数据是否发生改变是一个常见的需求,特别是在需要确认用户是否保存了更改或者在离开页面前提醒用户有未保存的数据时。这里提供的一种方法是通过遍历表单元素并比较当前值与初始值来判断是否...
总的来说,"页面离开时检查表单是否改变"这一功能是通过JavaScript和jQuery实现的,它利用事件监听和状态跟踪,确保用户在无意离开页面时有机会保存他们的工作。尽管现代浏览器对`beforeunload`事件的处理有所限制,...
8. **事件处理与DOM操作**:JavaScript可以直接操作文档对象模型(DOM),改变页面元素的属性,如文本内容、CSS样式,以响应用户的操作。例如,当用户输入不合法的用户名或密码时,可以动态修改对应的提示信息。 综...
在用户提交表单时,JavaScript发送数据到服务器,服务器验证后返回结果,再由JavaScript处理反馈信息。 7. **错误提示和样式控制**:在验证失败时,JavaScript可以改变元素的样式(如添加红色边框或错误提示文字)...
在本压缩包“js问卷调查投票页面表单代码.zip”中,包含了一个使用原生JavaScript实现的在线问卷调查投票页面的代码示例。这个项目主要关注的是如何利用JavaScript技术来创建一个交互性强、功能完善的投票表单。我们...
### JavaScript客户端验证与页面特效制作知识点详解 #### 第一章:JavaScript的基本特征 ##### 一、关于JavaScript JavaScript 是一种轻量级的编程语言,它最初由 Netscape 和 Sun Microsystems 共同开发。该语言...
1.16 判断页面是否添加了W3C声明 1.17 屏蔽网页中的脚本 1.18 以频道模式打开页面 1.19 自动识别网页类型 1.20 在网页中动态添加Script脚本 1.21 用JavaScript随机修改页面的标题 1.22 判断网页加载完毕 1.23 嵌入...
始终应当在服务器端再次进行表单数据的验证和清洗,以防止恶意攻击和数据污染。 在前端进行表单验证,还可以通过CSS为不同的验证状态提供视觉反馈,比如输入框获得焦点时改变边框颜色、输入错误时显示提示信息等,...
1.16 判断页面是否添加了W3C声明 1.17 屏蔽网页中的脚本 1.18 以频道模式打开页面 1.19 自动识别网页类型 1.20 在网页中动态添加Script脚本 1.21 用JavaScript随机修改页面的标题 1.22 判断网页加载完毕 1.23 嵌入...
- **表单(Forms)和验证(Validation)**:处理用户输入和验证数据的有效性。 总的来说,JavaScript的优势在于其灵活性和丰富的功能,使得开发者能构建高度交互和动态的Web应用。了解和掌握这些基础知识对于成为一...
此外,根据不同的业务逻辑,还应该实现对用户输入值的实时验证,根据输入值的变化来判断数据是否符合验证规则,并相应地改变输入框的提示样式。 在实现JavaScript表单验证时,以下几点是需要注意的: 1. 必须确保...
总结来说,实现JavaScript表单隔行换色的核心在于使用DOM操作获取并遍历表格行,根据行的索引判断是否为偶数,然后动态添加CSS类来改变背景色。这种技术不仅可以提升用户对大量数据的阅读体验,也是JavaScript在网页...
4. **响应式布局**:利用JavaScript根据窗口大小改变页面布局,了解媒体查询和事件监听。 5. **游戏开发**:例如猜数字游戏,实现逻辑判断和用户交互。 6. **Ajax请求**:模拟发送Ajax请求获取数据,并在页面上...
5. **表单验证**:JavaScript可以用来验证用户输入的数据是否符合预期格式,从而提高数据的安全性和准确性。例如,可以通过正则表达式来判断用户输入的邮箱地址是否有效。 6. **响应式设计**:JavaScript还可以帮助...
2. **数据类型掌握**: 包括基本数据类型(如字符串、数字等)和复杂数据类型(如数组、对象等)。 3. **运算符掌握**: 包括算术运算符(加减乘除等)、比较运算符(大于、小于等于等)、逻辑运算符(与、或、非等)...
【标题】"JavaScript经典特效——对选择的判断"主要涵盖了JavaScript在网页交互中的核心功能,即处理用户的选择和进行相应的判断。JavaScript是一种广泛应用于客户端Web开发的脚本语言,它赋予了网页动态交互的能力...
正则表达式的使用可以极大地增强表单数据的准确性和安全性,减少服务器端的验证负担。 综上所述,"表单兼容布局和正则验证"涵盖了前端开发中的一些关键技能,这些技能对于构建高质量、响应式的移动端应用至关重要。...
在网页开发中,JavaScript(简称JS)是一种必不可少的脚本语言,它被广泛用于实现客户端的交互和数据验证。"js验证表单大全"通常指的是一个集合,包含了各种常见的JavaScript表单验证方法和示例,旨在帮助开发者创建...