囝濼的博客[www.bluenuo.cn]

文/囝濼 www.bluenuo.cn

使用方法：
1.在需要的頁(yè)面引入javascript核心代碼（下面有，復(fù)制粘貼即可）
2.在body的onload事件中加入saveElementsOnLoad(myform);方法，其中myform是所驗(yàn)證的form對(duì)象
3.在body的onbeforeunload事件中加入return checkFormOnUnload(myform);其中myform是所驗(yàn)證的form對(duì)象
4.ignoreFormCheck()和forceFormCheck()函數(shù)為一對(duì)姐妹函數(shù)，供用戶在自己的jsp頁(yè)面中調(diào)用，以處理特殊情況，如按保存按鈕不檢查form是否改變、導(dǎo)入上次保存結(jié)果，沒(méi)保存離開(kāi)頁(yè)面需要強(qiáng)制提示等情況。這兩個(gè)函數(shù)如果多次調(diào)用，以程序流程中最后調(diào)用的那個(gè)函數(shù)為準(zhǔn)，其他調(diào)用將不產(chǎn)生影響
ignoreFormCheck()為忽略離開(kāi)頁(yè)面驗(yàn)證，用戶在自己的javascript函數(shù)中調(diào)用該方法后即使form發(fā)生改變離開(kāi)頁(yè)面時(shí)也不做任何判斷即可離開(kāi)
forceFormCheck()為強(qiáng)制離開(kāi)頁(yè)面驗(yàn)證，用戶在自己的javascript函數(shù)中調(diào)用該方法后即使form沒(méi)有發(fā)生改變，離開(kāi)頁(yè)面也會(huì)提示form已經(jīng)改變
5.getFormStatus(myform)方法可隨時(shí)檢查form是否已經(jīng)改變，改變返回ture，否則返回false，其中myform是所檢查的form對(duì)象
使用示例
示例代碼下載
javascript核心代碼 使用時(shí)復(fù)制到<script>標(biāo)簽體中即可

        //保存form里的所有原始屬性
        var alSavedElements = new Array();
        //是否判斷form的屬性改變，true判斷，false不判斷
        var bCheckForm = true;
        
        /**//**
         * 頁(yè)面加載時(shí)候的操作，所有頁(yè)面加載時(shí)的操作可以在這里進(jìn)行擴(kuò)展
         * @param form 所要保存屬性的form
         */
        function saveElementsOnLoad(form) {
            saveFormElements(form);
        }
        
        /**//**
         * 離開(kāi)頁(yè)面時(shí)的操作，所有離開(kāi)頁(yè)面前的操作可在這里進(jìn)行擴(kuò)展
         * @param form 所要保存屬性的form
         * @param elements 所保存的屬性的數(shù)組
         * @return 離開(kāi)頁(yè)面的提示信息
         */
        function checkFormOnUnload(form) {
            var bFormStatus = isFormChanged(form);
            if(bCheckForm && bFormStatus) {
                return "該頁(yè)面已經(jīng)被修改，離開(kāi)后所有修改全部丟失！"; 
            }
            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 所比較的原始屬性數(shù)組
         * @return true form已變化 false form沒(méi)變化
         */
        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改變檢查
         * 說(shuō)明：該函數(shù)調(diào)用后即使form改變也不做離開(kāi)頁(yè)面的提示
         */
        function ignoreFormCheck() {
            bCheckForm = false;
        }
        
        /**//**
         * 強(qiáng)制進(jìn)行form改變檢查
         * 說(shuō)明：該函數(shù)調(diào)用后無(wú)論form是否改變都會(huì)提示form已改變，是否離開(kāi)頁(yè)面
         */
        function forceFormCheck() {
            bCheckForm = true;
        }
        
        /**//**
         * 返回form的當(dāng)前狀態(tài)
         * 說(shuō)明：用戶可以通過(guò)該狀態(tài)決定程序的流程走向
         * @param form 所檢查的form對(duì)象
         * @return ture form改變，true form沒(méi)改變
         */
        function getFormStatus(form) {
           return isFormChanged(form); 
        }