javascript 实现 检查form内容是否发生改变 (非常强大)

使用方法:
1.在需要的页面引入javascript核心代码(下面有,复制粘贴即可)
2.在body的onload事件中加入saveElementsOnLoad(myform);方法,其中myform是所验证的form对象
3.在body的onbeforeunload事件中加入return checkFormOnUnload(myform);其中myform是所验证的form对象
4.ignoreFormCheck()和forceFormCheck()函数为一对姐妹函数,供用户在自己的jsp页面中调用,以处理特殊情况,如按保存按钮不检查form是否改变、导入上次保存结果,没保存离开页面需要强制提示等情况。这两个函数如果多次调用,以程序流程中最后调用的那个函数为准,其他调用将不产生影响
ignoreFormCheck()为忽略离开页面验证,用户在自己的javascript函数中调用该方法后即使form发生改变离开页面时也不做任何判断即可离开
forceFormCheck()为强制离开页面验证,用户在自己的javascript函数中调用该方法后即使form没有发生改变,离开页面也会提示form已经改变
5.getFormStatus(myform)方法可随时检查form是否已经改变,改变返回ture,否则返回false,其中myform是所检查的form对象

var form = document.forms[0];

 

 

//保存form里的所有原始属性
 var alSavedElements = new Array();
 //是否判断form的属性改变,true判断,false不判断
 var bCheckForm = true;
 
 /**//**
  * 页面加载时候的操作,所有页面加载时的操作可以在这里进行扩展
  * @param form 所要保存属性的form
  */
 function saveElementsOnLoad(form) {
     saveFormElements(form);
 }
 
 /**//**
  * 离开页面时的操作,所有离开页面前的操作可在这里进行扩展
  * @param form 所要保存属性的form
  * @param elements 所保存的属性的数组
  * @return 离开页面的提示信息
  */
 function checkFormOnUnload(form) {
     var bFormStatus = isFormChanged(form);
     if(bCheckForm && bFormStatus) {
         return "该页面已经被修改,离开后所有修改全部丢失!";
     }
     return;
 }
 
 /**//**
  * 保存form的所有属性
  * @param form 所要保存的属性的form
  */
 function saveFormElements(form) {
     for(var i = 0 ; i < form.elements.length ; i++ ) {
         if("select-one" == form.elements[i].type) {
             alSavedElements.push(form.elements[i].selectedIndex);
             continue;
         }
         if("radio" == form.elements[i].type || "checkbox" == form.elements[i].type) {
             alSavedElements.push(form.elements[i].checked);
             continue;
         }
         alSavedElements.push(form.elements[i].value);
     }
 }
 
 /**//**
  * 检查form的属性是否改变
  * @param form 所比较的form
  * @param alSavedElements 所比较的原始属性数组
  * @return true form已变化 false form没变化
  */
 function isFormChanged(form) {
     var bChanged = false;
     if(form.elements.length!=alSavedElements.length) {
         bChanged = true;
         return bChanged;
     }
     for(var i = 0 ; i < form.elements.length ; i++ ) {
         if("submit" != form.elements[i].type && "button" != form.elements[i].type && "reset" != form.elements[i].type && "hidden" != form.elements[i].type && "radio" != form.elements[i].type && "checkbox" != form.elements[i].type && "select-one" != form.elements[i].type && form.elements[i].value!=alSavedElements[i]) {
             bChanged = true;
             break;
         }
         if("select-one" == form.elements[i].type && form.elements[i].selectedIndex!=alSavedElements[i]) {
             bChanged = true;
             break;
         }
         if(("radio" == form.elements[i].type || "checkbox" == form.elements[i].type ) && form.elements[i].checked != alSavedElements[i]) {
             bChanged = true;
             break;
         }
     }
     return bChanged;
 }
 
 /**//**
  * 忽略form改变检查
  * 说明:该函数调用后即使form改变也不做离开页面的提示
  */
 function ignoreFormCheck() {
     bCheckForm = false;
 }
 
 /**//**
  * 强制进行form改变检查
  * 说明:该函数调用后无论form是否改变都会提示form已改变,是否离开页面
  */
 function forceFormCheck() {
     bCheckForm = true;
 }
 
 /**//**
  * 返回form的当前状态
  * 说明:用户可以通过该状态决定程序的流程走向
  * @param form 所检查的form对象
  * @return ture form改变,true form没改变
  */
 function getFormStatus(form) {
    return isFormChanged(form);
 }

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值