JavaScript判断用户是否对表单进行了修改的方法


Posted in Javascript onMarch 18, 2015

本文实例讲述了JavaScript判断用户是否对表单进行了修改的方法。分享给大家供大家参考。具体分析如下:

这段JS代码可以判断出用户是否对表单内容进行了修改,如果修改了表单,并退出浏览器,则会提醒用户是否要保存表单的内容,是非常有用的代码。

function formIsDirty(form) {
 for (var i = 0; i < form.elements.length; i++) {
  var element = form.elements[i];
  var type = element.type;
  if (type == "checkbox" || type == "radio") {
   if (element.checked != element.defaultChecked) {
    return true;
   }
  }
  else if (type == "hidden" || type == "password" ||
       type == "text" || type == "textarea") {
   if (element.value != element.defaultValue) {
    return true;
   }
  }
  else if (type == "select-one" || type == "select-multiple") {
   for (var j = 0; j < element.options.length; j++) {
    if (element.options[j].selected !=
      element.options[j].defaultSelected) {
     return true;
    }
   }
  }
 }
 return false;
}

使用示例:当退出浏览器是,如果用户修改了表单,则提醒用户是否要保存

window.onbeforeunload = function(e) {
 e = e || window.event; 
 if (formIsDirty(document.forms["someForm"])) {
  // For IE and Firefox
  if (e) {
   e.returnValue = "You have unsaved changes.";
  }
  // For Safari
  return "You have unsaved changes.";
 }
};

下面是一个完整的范例代码

Click on below button. Now change some values in form and click the button again.

<form name="fooForm">

    <input type="text" name="t"><br>

    <input type="text" name="2" value="default"><br>

    <select name="some">

        <option value="fooo" selected="">foo</option>

        <option value="bar">bar</option>

    </select><br>

</form>

    <button onclick="alert(formIsDirty(document.fooForm))">Click to check if Form is Dirty</button>

<br>

<script>

function formIsDirty(form) {

  for (var i = 0; i < form.elements.length; i++) {

    var element = form.elements[i];

    var type = element.type;

    if (type == "checkbox" || type == "radio") {

      if (element.checked != element.defaultChecked) {

        return true;

      }

    }

    else if (type == "hidden" || type == "password" ||

             type == "text" || type == "textarea") {

      if (element.value != element.defaultValue) {

        return true;

      }

    }

    else if (type == "select-one" || type == "select-multiple") {

      for (var j = 0; j < element.options.length; j++) {

        if (element.options[j].selected !=

            element.options[j].defaultSelected) {

          return true;

        }

      }

    }

  }

  return false;

}

</script>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
老鱼 浅谈javascript面向对象编程
Mar 04 Javascript
jquery 跨域访问问题解决方法(笔记)
Jun 08 Javascript
Javascript基础 函数“重载” 详细介绍
Oct 25 Javascript
被遗忘的javascript的slice() 方法
Apr 20 Javascript
举例简介AngularJS的内部语言环境
Jun 17 Javascript
JS组件Bootstrap Select2使用方法详解
Apr 17 Javascript
详解vue-cli中配置sass
Jun 21 Javascript
JS中Safari浏览器中的Date
Jul 17 Javascript
ztree简介_动力节点Java学院整理
Jul 19 Javascript
搭建基于express框架运行环境的方法步骤
Nov 15 Javascript
详解微信小程序框架wepy踩坑记录(与vue对比)
Mar 12 Javascript
jstree中的checkbox默认选中和隐藏示例代码
Dec 29 Javascript
JavaScript阻止浏览器返回按钮的方法
Mar 18 #Javascript
JavaScript列表框listbox全选和反选的实现方法
Mar 18 #Javascript
JavaScript控制listbox列表框的项目上下移动的方法
Mar 18 #Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
Mar 18 #Javascript
jQuery实现根据类型自动显示和隐藏表单
Mar 18 #Javascript
jQuery实现列表的全选功能
Mar 18 #Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
Mar 18 #Javascript
You might like
Smarty foreach控制循环次数的实现详解
2013/07/03 PHP
thinkphp3.x自定义Action、Model及View的简单实现方法
2016/05/19 PHP
PHP基于DOMDocument解析和生成xml的方法分析
2017/07/17 PHP
PHP常用日期加减计算方法实例小结
2018/07/31 PHP
浅谈PHPANALYSIS提取关键字
2019/03/08 PHP
javascript[js]获取url参数的代码
2007/10/17 Javascript
jQuery TextBox自动完成条
2009/07/22 Javascript
js TextArea的选中区域处理
2010/12/28 Javascript
用JavaScript实现类似于ListBox功能示例代码
2014/03/09 Javascript
IE浏览器不支持getElementsByClassName的解决方法
2014/08/27 Javascript
简述Matlab中size()函数的用法
2016/03/20 Javascript
jQuery实现的简单拖动层示例
2017/02/22 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
2017/03/28 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
2018/01/03 Javascript
详解Vue文档中几个易忽视部分的剖析
2018/03/24 Javascript
js实现页面多个日期时间倒计时效果
2019/06/20 Javascript
使用layer.msg 时间设置不起作用的解决方法
2019/09/12 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
2020/06/07 Javascript
[08:44]和酒神一起战斗 DOTA2教你做大人
2014/03/27 DOTA
盘点提高 Python 代码效率的方法
2014/07/03 Python
详解python3实现的web端json通信协议
2016/12/29 Python
Python实现的三层BP神经网络算法示例
2018/02/07 Python
python实现简单加密解密机制
2019/03/19 Python
解决python中用matplotlib画多幅图时出现图形部分重叠的问题
2019/07/07 Python
python3的UnicodeDecodeError解决方法
2019/12/20 Python
使用python对excel表格处理的一些小功能
2021/01/25 Python
一款基于css3的列表toggle特效实例教程
2015/01/04 HTML / CSS
详解canvas.toDataURL()报错的解决方案全都在这了
2020/03/31 HTML / CSS
联想墨西哥官方网站:Lenovo墨西哥
2016/08/17 全球购物
Peter Alexander新西兰站:澳大利亚领先的睡衣设计师品牌
2016/12/10 全球购物
全球性的在线购物网站:Zapals
2017/03/22 全球购物
Everlast官网:拳击、综合格斗和健身相关的体育用品
2020/08/03 全球购物
中专药剂专业应届毕的自我评价
2013/12/27 职场文书
德语专业求职信
2014/03/12 职场文书
升职演讲稿范文
2014/05/23 职场文书
Nginx配置根据url参数重定向
2022/04/11 Servers