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 相关文章推荐
jQuery 绑定事件到动态创建的元素上的方法实例
Aug 18 Javascript
JavaScript原型链示例分享
Jan 26 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
Sep 03 Javascript
7个有用的jQuery代码片段分享
May 19 Javascript
详解JavaScript基于面向对象之创建对象(2)
Dec 10 Javascript
javascript this详细介绍
Sep 19 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
Nov 13 Javascript
inner join 内联与left join 左联的实例代码
Sep 18 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
Sep 20 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
基于javascript处理二进制图片流过程详解
Jun 08 Javascript
关于ES6尾调用优化的使用
Sep 11 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
PHP设置图片文件上传大小的具体实现方法
2013/10/11 PHP
mac下安装nginx和php
2013/11/04 PHP
微信公众平台实现获取用户OpenID的方法
2015/04/15 PHP
PHP实现过滤掉非汉字字符只保留中文字符
2015/06/04 PHP
php微信公众号开发模式详解
2016/11/28 PHP
php正则修正符用法实例详解
2016/12/29 PHP
PHP实现查询手机归属地的方法详解
2017/04/28 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/02/09 Javascript
事件绑定之小测试  onclick &amp;&amp; addEventListener
2011/07/31 Javascript
jQuery基础框架浅入剖析
2012/12/27 Javascript
简介JavaScript中fixed()方法的使用
2015/06/08 Javascript
深入理解jQuery layui分页控件的使用
2016/08/17 Javascript
在一个页面重复使用一个js函数的方法详解
2016/12/26 Javascript
Javascript前端经典的面试题及答案
2017/03/14 Javascript
简单谈谈React中的路由系统
2017/07/25 Javascript
关于Vue组件库开发详析
2018/07/01 Javascript
vue Element左侧无限级菜单实现
2020/06/10 Javascript
Python爬取国外天气预报网站的方法
2015/07/10 Python
通过实例浅析Python对比C语言的编程思想差异
2015/08/30 Python
Python实现针对含中文字符串的截取功能示例
2017/09/22 Python
解决Pandas to_json()中文乱码,转化为json数组的问题
2018/05/10 Python
点球小游戏python脚本
2018/05/22 Python
python+mysql实现学生信息查询系统
2019/02/21 Python
简单了解python的一些位运算技巧
2019/07/13 Python
使用python绘制温度变化雷达图
2019/10/18 Python
python 实现批量替换文本中的某部分内容
2019/12/13 Python
python爬虫把url链接编码成gbk2312格式过程解析
2020/06/08 Python
用CSS3的box-reflect来制作倒影效果
2016/11/15 HTML / CSS
HTML5基于flash实现播放RTMP协议视频的示例代码
2020/12/04 HTML / CSS
美国隐形眼镜网:Major Lens
2018/02/09 全球购物
Geekbuying波兰:购买中国电子产品
2019/10/20 全球购物
高职教师岗位职责
2013/12/24 职场文书
化学教师自荐信范文
2013/12/28 职场文书
违反工作纪律检讨书
2014/02/15 职场文书
中职毕业生自我鉴定范文(3篇)
2014/09/28 职场文书
大队委员竞选演讲稿
2015/11/20 职场文书