通用离开页面前检查form内容是否发生改变

通用离开页面前检查form内容是否发生改变

文/囝泺 www.bluenuo.cn

使用方法：
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对象
使用示例
示例代码下载
javascript核心代码 使用时复制到<script>标签体中即可

         // 保存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); 
        }

囝泺，深圳康拓普信息技术有限公司
您可以通过其博客了解更多信息和文章： http://www.bluenuo.cn